如何使用 Bootstrap 4 的 Flexbox 网格实现 Masonry 布局？

如何使用 Flexbox 网格在 Bootstrap 4 中创建砌体布局

在 Bootstrap 4 中，您可以利用 Flexbox 实现砌体列布局利用卡片列进行网格化

解决方案：

将卡片元素包装在 .card-columns 容器中，如下所示：

<div class="container">
  <div class="card-columns">
    <div class="card">...</div>
    <div class="card">...</div>
    <div class="card">...</div>
  </div>
</div>

说明：

• .card-columns 类使用 CSS 列从上到下、从左到右排列卡片。
• 卡片以内联块方式显示，以防止它们跨列。
• 因为列-break-inside: 避免还不是万无一失的解决方案，您可能仍然会遇到不一致的列

示例：

考虑以下 HTML：

<div class="container">
  <div class="card-columns">
    <div class="card">
      <img src="/static/imghwm/default1.png" data-src="card-image-1.jpg" class="lazy" alt="Card image">
      <div class="card-body">
        <h5 id="Card-title">Card title</h5>
        <p class="card-text">...</p>
      </div>
    </div>
    <div class="card">
      <img src="/static/imghwm/default1.png" data-src="card-image-2.jpg" class="lazy" alt="Card image">
      <div class="card-body">
        <h5 id="Another-card-title">Another card title</h5>
        <p class="card-text">...</p>
      </div>
    </div>
    <div class="card">
      <img src="/static/imghwm/default1.png" data-src="card-image-3.jpg" class="lazy" alt="Card image">
      <div class="card-body">
        <h5 id="Card-with-long-title">Card with long title</h5>
        <p class="card-text">...</p>
      </div>
    </div>
    <div class="card">
      <img src="/static/imghwm/default1.png" data-src="card-image-4.jpg" class="lazy" alt="Card image">
      <div class="card-body">
        <h5 id="Another-card-with-even-more-text">Another card with even more text</h5>
        <p class="card-text">...</p>
      </div>
    </div>
  </div>
</div>

这将导致砖石布局，其中包含卡片根据内容高度进行排列，创建一个视觉上吸引人的动态网格。

以上是如何使用 Bootstrap 4 的 Flexbox 网格实现 Masonry 布局？的详细内容。更多信息请关注PHP中文网其他相关文章！