我如何将引导卡漂浮在单列中?我正在尝试使用2列进行博客布局。左侧的第一列用于显示博客文章,右侧的列用于搜索,个人资料等。我想将卡片连续作为2辆车漂浮在左侧的列中,但是当我尝试时就像一个堆叠的布局,一个在另一个的底部。
这里是HTML代码。
<div class="recent">
<div class="row">
<div class="col-md-10">
<h1>Recent Posts</h1>
<div class="card" style="width: 25rem;">
<img src="{{ url_for('static', filename = 'uploads/blog/' + first['cover_img'])}}" class="card-img-top" alt="..." height="30%">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card" style="width: 25rem;">
<img src="{{ url_for('static', filename = 'uploads/blog/' + first['cover_img'])}}" class="card-img-top" alt="..." height="30%">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-md-2">
</div>
</div>
</div>
我尝试过ml-auto
和float-left
,但这不起作用
将它们放置在一行中,然后将每个放置在一个列中,然后您可以修改每个列的宽度,并可以使用所需的对齐方式。
<div class="recent">
<div class="row ">
<div class="col-md-10">
<h1>Recent Posts</h1>
<div class="row">
<div class="col">
<div class="card" style="width: 25rem;">
<img
src="{{ url_for('static', filename = 'uploads/blog/' + first['cover_img'])}}"
class="card-img-top"
alt="..."
height="30%"
/>
<div class="card-body">
<p class="card-text">
Some quick example text to build on the card title and make
up the bulk of the card's content.
</p>
</div>
</div>
</div>
<div class="col">
<div class="card" style="width: 25rem;">
<img
src="{{ url_for('static', filename = 'uploads/blog/' + first['cover_img'])}}"
class="card-img-top"
alt="..."
height="30%"
/>
<div class="card-body">
<p class="card-text">
Some quick example text to build on the card title and make
up the bulk of the card's content.
</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-2"></div>
</div>
</div>
G'day Mate!尝试这个 ;
<div class="recent">
<div class="row">
<div class="col-md-10">
<h1>Recent Posts</h1>
<div class="card" style="width: 25rem; float:left; margin:20px;">
<img src="{{ url_for('static', filename = 'uploads/blog/' + first['cover_img'])}}" class="card-img-top" alt="..." height="30%">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card" style="width: 25rem; float:left; margin:20px;">
<img src="{{ url_for('static', filename = 'uploads/blog/' + first['cover_img'])}}" class="card-img-top" alt="..." height="30%">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-md-2">
</div>
</div>
</div>