CSS 使用 flexbox 网格的 Bootstrap 4 砌体布局
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48468140/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 4 masonry layout utilizing flexbox grid
提问by Anthony Russo
Is there a way to create a masonry column layout utilizing the flexbox grid that Bootstrap 4 comes equipped with? It seems to me that all of the columns are equal height.
有没有办法利用 Bootstrap 4 配备的 flexbox 网格创建砖石柱布局？在我看来，所有的柱子高度都相等。
回答by dferenc
This is pretty much doable with standard Bootstrap 4 classes. There is even a whole section in the documentation about the Card columnsfeature.
这对于标准的 Bootstrap 4 类几乎是可行的。文档中甚至有一整节是关于卡片列功能的。
From the docs:
Cards can be organized into Masonry-like columns with just CSS by wrapping them in .card-columns. Cards are built with CSScolumn properties instead of flexbox for easier alignment. Cards are ordered from top to bottom and left to right.
从文档：
卡可以组织成砖石般只用CSS列在包装他们.card-columns。卡片是使用CSS列属性而不是 flexbox 构建的，以便于对齐。卡片按从上到下、从左到右的顺序排列。
Heads up! Your mileage with card columns may vary. To prevent cards breaking across columns, we must set them to display: inline-blockas column-break-inside: avoidisn't a bulletproof solution yet.
当心！您使用卡列的里程可能会有所不同。为了防止卡跨列，我们必须将它们设置display: inline-block为column-break-inside: avoid还不是防弹解决方案。
So, all you have to do is to wrap your .cards into a .card-columnscontainer like this:
所以，你所要做的就是将你的.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"/>回答by Ravi Makwana
There's many choices for Mosonry Grid Layouts..
Mosonry 网格布局有很多选择。
Here's Check it out 10 Code Snippets for Creating Masonry Grid Layouts
I prefer to use CSS
我更喜欢使用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>