这对于标准的Bootstrap 4类几乎是可行的。文档中甚至有一整节关于“证件栏”功能。
从文档中： 只需将CSS包裹在中，就可以使用CSS将 卡片组织成类似于砌体的列.card-columns
。卡是使用CSS
列属性而不是flexbox构建的，以便于对齐。卡的排列顺序是从上到下，从左到右。
小心！ 您使用信用卡栏的里程可能会有所不同。为防止卡跨列断裂，我们必须将其设置display: inline-block
为column-break-inside: avoid
还不是防弹解决方案。
因此，您要做的就是将
.cards 包装到这样的
.card-columns容器中：
<div > <div > <div > <img src="http://via.placeholder.com/1600x900/483D8B/ffffff?text=Card+1" alt="Card image cap"> <div > <h5 >Card title that wraps to a new line</h5> <p >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 > <blockquote > <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <footer > <small > Someone famous in <cite title="Source Title">Source Title</cite> </small> </footer> </blockquote> </div> <div > <img src="http://via.placeholder.com/1600x450/9400D3/ffffff?text=Card+2" alt="Card image cap"> <div > <h5 >Card title</h5> <p >This card has supporting text below as a natural lead-in to additional content.</p> <p ><small >Last updated 3 mins ago</small></p> </div> </div> <div > <blockquote > <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p> <footer > <small> Someone famous in <cite title="Source Title">Source Title</cite> </small> </footer> </blockquote> </div> <div > <div > <h5 >Card title</h5> <p >This card has supporting text below as a natural lead-in to additional content.</p> <p ><small >Last updated 3 mins ago</small></p> </div> </div> <div > <img src="http://via.placeholder.com/1600x1600/FF1493/ffffff?text=Card+3" alt="Card image"> </div> <div > <blockquote > <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <footer > <small > Someone famous in <cite title="Source Title">Source Title</cite> </small> </footer> </blockquote> </div> <div > <div > <h5 >Card title</h5> <p >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 ><small >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"/>
