带网格的 Bootstrap 4 卡片列

Posted 2023-03-05

【中文标题】带网格的 Bootstrap 4 卡片列

【英文标题】：Bootstrap 4 card-columns with grid

【发布时间】：2021-06-19 03:16:08

【问题描述】：

感谢***上关于card-columns的许多问题和答案，我可以在row中设置平铺cols，但它看起来像是某种填充或边距，否则会破坏引导程序的每行12列“规则”。

我正在尝试实现砖石/pinterest 磁贴布局，Tile 1 和 Tile 2 列位于 description 列下方，白色 text 保留在 picture profile 下方。

在下面的示例中，当我将 description 列的宽度设置为 col-xl-4 时，它会保留在 profile picture 列下方而不是旁边。

此外，description 列的高度与profile picture 列的高度相同。

   <div class="container-fluid">
        <div class="row card-columns">
            <div class="col-xl-8 card">
                <div class="card-body">
                    <h2>Profile picture</h2>
                    <img src="https://via.placeholder.com/900x500.jpg"  class="img-fluid rounded">
                </div>
            </div>

            <div class="col-xl-4 card">
                <div class="card-body">
                    <h2>Description</h2>
                </div>
            </div>  

            <div class="col-xl-8 card">
                <div class="card-body">
                    <h2>Text</h2>
                </div>
            </div>  

            <div class="col-xl-2 card">
                <div class="card-body">
                    <h2>Tile 1</h2>
                </div>
            </div>  

            <div class="col-xl-2 card">
                <div class="card-body">
                    <h2>Tile 2</h2>
                </div>
            </div>  
        </div>
    </div>

我该如何解决这个问题？我在这里错过了什么？

【参考方案1】：

在这个小提琴上试过https://jsfiddle.net/pba8h4dk/。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-9 card">
      <div class="card-body">
        <h2>Profile picture</h2>
        <img src="https://via.placeholder.com/900x500.jpg"  class="img-fluid rounded">
      </div>
    </div>

    <div class="col-lg-3 card">
      <div class="card-body">
        <h2>Description</h2>
      </div>
    </div>  
  </div>
</div>

删除 card-columns 类可以解决问题（显然要确保您的屏幕是 sm/md/lg/）

【讨论】：

谢谢，但我确实需要card-columns 来实现平铺布局效果。我编辑了我的问题以澄清这一点。

@user7890 也许这样：[***.com/questions/34140793/… 可以为您指明正确的方向