Bootstrap 4 利用 flexbox 网格的砌体布局

Question

有没有办法利用 Bootstrap 4 配备的 flexbox 网格创建砖石柱布局？在我看来，所有的列都是等高的。

Answer 1

这对于标准 Bootstrap 4 类来说几乎是可行的。文档中甚至有一整节是关于 Card columns 功能的。

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

注意！您的卡列里程可能会有所不同。为了防止卡片跨栏，我们必须将它们设置为 display: inline-block，因为 column-break-inside: avoid 还不是一个防弹解决方案。

所以，您所要做的就是像这样将 .card 包装到 .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"/>

Answer 2

Mosonry 网格布局有多种选择..

来看看吧10 Code Snippets for Creating Masonry Grid Layouts

我更喜欢用CSS

.masonry { /* Masonry container */
    -webkit-column-count: 4;
    -moz-column-count:4;
    column-count: 4;
    -webkit-column-gap: 1em;
    -moz-column-gap: 1em;
    column-gap: 1em;
    margin: 1.5em;
    padding: 0;
}

body {
  font-family: sans-serif;
   margin: 0;
   background: #f2f2f2;
}

h1 {
  text-align: center;
  margin-top: 50px;
}

p {
  text-align: center;
  margin-bottom:60px;
}

h4{
  text-align:center; 
  line-height:80px;
  font-weight:normal;

}

.masonry { /* Masonry container */
    -webkit-column-count: 4;
  -moz-column-count:4;
  column-count: 4;
  -webkit-column-gap: 1em;
  -moz-column-gap: 1em;
  column-gap: 1em;
   margin: 1.5em;
    padding: 0;
    -moz-column-gap: 1.5em;
    -webkit-column-gap: 1.5em;
    column-gap: 1.5em;
    font-size: .85em;
}
.item {
    display: inline-block;
    background: #fff;
    padding: 1em;
    margin: 0 0 1.5em;
    width: 100%;
 -webkit-transition:1s ease all;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-shadow: 2px 2px 4px 0 #ccc;
}
.item img{max-width:100%; height: auto;}

@media only screen and (max-width: 320px) {
    .masonry {
        -moz-column-count: 1;
        -webkit-column-count: 1;
        column-count: 1;
    }
}

@media only screen and (min-width: 321px) and (max-width: 768px){
    .masonry {
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
    }
}
@media only screen and (min-width: 769px) and (max-width: 1200px){
    .masonry {
        -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
    }
}
@media only screen and (min-width: 1201px) {
    .masonry {
        -moz-column-count: 4;
        -webkit-column-count: 4;
        column-count: 4;
    }
}

<h1>Responsive Masonry Grid</h1>
<p>A pure CSS-only responsive masonry.</p>
<div class="masonry">
  <div class="item">
    1
    <img src="http://www.pixeden.com/media/k2/galleries/468/001-business-card-clip-brand-mock-up-vol-20-psd.jpg">
  </div>
  <div class="item">
    2
    <img src="http://www.graphicsfuel.com/wp-content/uploads/2015/11/branding-mockup-psd.jpg">
  </div>
  <div class="item">
    3
    <img src="http://www.pixeden.com/media/k2/galleries/511/001-business-card-mockup-vol-22-box-brand-psd.jpg">
  </div>
  <div class="item">
    4
    <img src="http://freede.ru/wp-content/uploads/2015/01/6546546542.jpg">
  </div>
  <div class="item">
    5
    <img src="https://blog.spoongraphics.co.uk/wp-content/uploads/2013/mockup/23.jpg">
  </div>
  <div class="item">
    6
    <img src="http://jquerypluginplus.com/wp-content/uploads/2015/09/Psd_Business_Card_MockUp.jpg">
  </div>
  <div class="item">
    7
    <img src="http://www.pixeden.com/media/k2/galleries/754/001-businesscard-mockup-presentation-psd-free-resource.jpg">
  </div>
  <div class="item">
    8
    <img src="http://designdecoding.com/wp-content/uploads/2014/09/001-a4-paper-brand-stationery-isometric-print-mock-up-psd-1.jpg">
  </div>
  <div class="item">
    9
    <img src="http://www.blugraphic.com/wp-content/uploads/2014/04/Folded-Page-Mockup1.jpg">
  </div>
  <div class="item">
    10
    <img src="http://cdn.designinstruct.com/files/542-free-branding-identity-mockups/29-branding-identity-mock-up-vol-8-full.jpg">
  </div>
  <div class="item">
    11
    <img src="http://www.thomsoon.com/img/portfolio/7clean/7-clean-business-card-mockup-psd-3.jpg">
  </div>
    <div class="item">
    12
    <img src="http://www.pixeden.com/media/k2/galleries/640/001-business-card-cardboard-mockup-presentation-wall-free-psd.jpg">
  </div>

  


</div>
<h4>Photo from <a href="https://www.google.com.tw/search?q=mock+up&espv=2&tbm=isch&source=lnt&tbs=isz:m&sa=X&ved=0ahUKEwidx5_s29DLAhVIj5QKHRblBf8QpwUIEw&dpr=1&biw=1920&bih=971"> google</a>.</h4>

Answer 3

我偶然发现了如何解决@erik-thiart 在

报告的排序问题

如果您需要像石匠一样的网格来遵循从左到右和从上到下的顺序，请在 class 中添加一个 ROW:

<div class="row card-columns">

行由较大的卡片尺寸固定，但它保持顺序。

Bootstrap 4 利用 flexbox 网格的砌体布局

Bootstrap 4 masonry layout utilizing flexbox grid

css

flexbox

bootstrap-4

css-multicolumn-layout