如何将引导卡漂浮在单列网格中

Question

我如何将引导卡漂浮在单列中？我正在尝试使用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，但这不起作用

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

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>