如何在单列网格中浮动 bootstrap 卡片

Question

如何让 bootstrap 卡片在单列中浮动？我正在尝试制作一个包含 2 列的博客布局。左起第一列用于显示博客 post，右列用于搜索、个人资料等...我想将卡片浮动在左列中，作为连续 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 但那不起作用

Answer 1

将它们放在一行中，每一个放在一个列中，然后您可以修改每个列的宽度，您可以使用您想要的对齐方式。

<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>

Answer 2

你好伙计！试试这个 ;

<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>

如何在单列网格中浮动 bootstrap 卡片

How to float the bootstrap card in a single column grid

html

css

blogs

gridview

bootstrap-4