使用 flexbox 网格的 Bootstrap 4 砌体布局
Posted
技术标签:
【中文标题】使用 flexbox 网格的 Bootstrap 4 砌体布局【英文标题】：Bootstrap 4 masonry layout utilizing flexbox grid 【发布时间】：2018-07-06 04:38:42 【问题描述】：有没有办法利用 Bootstrap 4 配备的 flexbox 网格创建砌体列布局？在我看来，所有列的高度都相同。
【问题讨论】：
【参考方案1】：这对于标准的 Bootstrap 4 类来说几乎是可行的。文档中甚至有一整节是关于 Card columns 功能的。
来自文档：卡片可以用 .card-columns 包装，只需 CSS 就可以组织成类似 Masonry 的列。卡片是使用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" >
<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" >
<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" >
</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"/>【讨论】：
这适用于砌体，但不能回答“利用 flexbox 网格”的问题。 非常感谢。节省时间 这仍然不能完美地工作，例如当每个 .card 也有 .shadow 时。也可以在这里查看问题：mdbootstrap.com/support/jquery/… 另外，这是从上到下的，很糟糕，你希望最新的在顶部，所以从左到右的顺序更好。 @executable，您可以使用“column-count: 4;”更改 .card-columns css 类财产。【参考方案2】：Mosonry Grid 布局有很多选择..
来看看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 imgmax-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>【讨论】：
很好的解决方案。每个项目如何水平排序，而不是垂直排序？【参考方案3】：我偶然发现了如何解决@erik-thiart 在Bootstrap 4 masonry layout utilizing flexbox grid 报告的订购问题
如果你需要像石匠一样的网格按照从左到右和从上到下的顺序添加一个 ROW 到类：
<div class="row card-columns">
这些行被较大的卡片大小固定，但它保持顺序。
【讨论】：
非常感谢。你节省了很多时间。 ！！！你太棒了以上是关于使用 flexbox 网格的 Bootstrap 4 砌体布局的主要内容，如果未能解决你的问题，请参考以下文章
flexbox + bootstrap 4. 如何拉伸 .col-**-* 的子级？
bootstrap 网格中的动态列排列（bootstrap+vanilla js）
Bootstrap 4 导航栏和内容填充高度 flexbox
Bootstrap 4 div（使用 btn 类）中的文本垂直对齐，使用 CSS Grid（并且没有 flexbox）时没有固定高度