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

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

从文档中： 只需将CSS包裹在中，就可以使用CSS将 卡片组织成类似于砌体的列

.card-columns

CSS

小心！ 您使用xyk栏的里程可能会有所不同。为防止卡跨列断裂，我们必须将其设置

display: inline-block

column-break-inside: avoid

因此，您要做的就是将

.card

.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"/>