使用Flexbox网格的Bootstrap 4砌体布局

Question

有没有办法利用Bootstrap 4随附的flexbox网格来创建砌体柱布局？在我看来，所有的列都是相等的高度。

Answer 1

这对于标准的Bootstrap 4类几乎是可行的。文档中甚至有一整节关于“证件栏”功能。

从文档中： 只需将CSS包裹在中，就可以使用CSS将 卡片组织成类似于砌体的列.card- columns。卡是使用CSS列属性而不是flexbox构建的，以便于对齐。卡的排列顺序是从上到下，从左到右。

小心！ 您使用信用卡栏的里程可能会有所不同。为防止卡跨列断裂，我们必须将其设置display: inline-block为column-break-inside: avoid还不是防弹解决方案。

因此，您要做的就是将.cards 包装到这样的.card-columns容器中：

<div class="container">

  <div class="card-columns">

    <div class="card">

      <img class="card-img-top" src="http://via.placeholder.com/1600x900/483D8B/ffffff?text=Card+1" alt="Card image cap">

      <div class="card-body">

        <h5 class="card-title">Card title that wraps to a new line</h5>

        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>

      </div>

    </div>

    <div class="card p-3">

      <blockquote class="blockquote mb-0 card-body">

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>

        <footer class="blockquote-footer">

          <small class="text-muted">

            Someone famous in <cite title="Source Title">Source Title</cite>

          </small>

        </footer>

      </blockquote>

    </div>

    <div class="card">

      <img class="card-img-top" src="http://via.placeholder.com/1600x450/9400D3/ffffff?text=Card+2" alt="Card image cap">

      <div class="card-body">

        <h5 class="card-title">Card title</h5>

        <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>

        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>

      </div>

    </div>

    <div class="card bg-primary text-white text-center p-3">

      <blockquote class="blockquote mb-0">

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>

        <footer class="blockquote-footer">

          <small>

            Someone famous in <cite title="Source Title">Source Title</cite>

          </small>

        </footer>

      </blockquote>

    </div>

    <div class="card text-center">

      <div class="card-body">

        <h5 class="card-title">Card title</h5>

        <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>

        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>

      </div>

    </div>

    <div class="card">

      <img class="card-img" src="http://via.placeholder.com/1600x1600/FF1493/ffffff?text=Card+3" alt="Card image">

    </div>

    <div class="card p-3 text-right">

      <blockquote class="blockquote mb-0">

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>

        <footer class="blockquote-footer">

          <small class="text-muted">

            Someone famous in <cite title="Source Title">Source Title</cite>

          </small>

        </footer>

      </blockquote>

    </div>

    <div class="card">

      <div class="card-body">

        <h5 class="card-title">Card title</h5>

        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>

        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>

      </div>

    </div>

  </div>

</div>





<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>