使用 flexbox 网格的 Bootstrap 4 砌体布局 [英] Bootstrap 4 masonry layout utilizing flexbox grid

查看：15
本文介绍了使用 flexbox 网格的 Bootstrap 4 砌体布局的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

解决方案

这对于标准 Bootstrap 4 类几乎是可行的.文档中甚至有一整节关于 卡片列 功能.

来自文档:
卡片可以组织成 Masonry-like 列，只需用 CSS 将它们包装在 .card 中-列.卡片是使用 CSS 列属性而不是 flexbox 构建的，以便于对齐.卡片按从上到下、从左到右的顺序排列.

抬头！您使用卡列的里程可能会有所不同.为了防止卡跨列，我们必须将它们设置为 display: inline-block 因为 column-break-inside: avoid 还不是防弹解决方案.

所以，您所要做的就是将您的 .card 包装到一个 .card-columns 容器中，如下所示:

<div class="card-columns"><div class="card"><img class="card-img-top" src="http://via.placeholder.com/1600x900/483D8B/ffffff?text=Card+1" alt="卡片图片上限"><div class="card-body"><h5 class="card-title">换行的卡片标题</h5><p class="card-text">这是一张较长的卡片，下面的支持文本是附加内容的自然引导.这个内容有点长.</p>

<div class="card p-3"><blockquote class="blockquote mb-0 card-body"><p>Lorem ipsum dolor sat amet, consectetur adipiscing elit.</p><footer class="blockquote-footer"><small class="text-muted">在<cite title="Source Title">Source Title</cite>中出名的某个人</小></页脚></blockquote>

<div class="card"><img class="card-img-top" src="http://via.placeholder.com/1600x450/9400D3/ffffff?text=Card+2" alt="卡片图片上限"><div class="card-body"><h5 class="card-title">卡片标题</h5><p class="card-text">这张卡片下面有支持文本，作为对附加内容的自然引导.</p><p class="card-text"><small class="text-muted">上次更新时间为 3 分钟前</small></p>

<div class="card bg-primary text-white text-center p-3"><blockquote class="blockquote mb-0"><p>Lorem ipsum dolor sat amet, consectetur adipiscing elit.</p><footer class="blockquote-footer"><小>在<cite title="Source Title">Source Title</cite>中出名的某个人</小></页脚></blockquote>

<div class="card text-center"><div class="card-body"><h5 class="card-title">卡片标题</h5><p class="card-text">这张卡片下面有支持文本，作为对附加内容的自然引导.</p><p class="card-text"><small class="text-muted">上次更新时间为 3 分钟前</small></p>

<div class="card"><img class="card-img" src="http://via.placeholder.com/1600x1600/FF1493/ffffff?text=Card+3" alt="卡片图片">

<div class="card p-3 text-right"><blockquote class="blockquote mb-0"><p>Lorem ipsum dolor sat amet, consectetur adipiscing elit.</p><footer class="blockquote-footer"><small class="text-muted">在<cite title="Source Title">Source Title</cite>中出名的某个人</小></页脚></blockquote>

<div class="card"><div class="card-body"><h5 class="card-title">卡片标题</h5><p class="card-text">这是一张更宽的卡片，下面的支持文本是附加内容的自然引导.这张卡片比第一张卡片的内容更长，以显示等高动作.</p><p class="card-text"><small class="text-muted">上次更新时间为 3 分钟前</small></p>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

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.

解决方案

This is pretty much doable with standard Bootstrap 4 classes. There is even a whole section in the documentation about the Card columns feature.

From the docs:
Cards can be organized into Masonry-like columns with just CSS by wrapping them in .card-columns. Cards are built with CSS column properties instead of flexbox for easier alignment. Cards are ordered from top to bottom and left to right.

Heads up! Your mileage with card columns may vary. To prevent cards breaking across columns, we must set them to display: inline-block as column-break-inside: avoid isn’t a bulletproof solution yet.

So, all you have to do is to wrap your .cards into a .card-columns container like this:

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

这篇关于使用 flexbox 网格的 Bootstrap 4 砌体布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆