Bootstrap 4 - 砌体布局与网格系统相结合(两列、三列、四列和六列布局)

Question

我正在尝试在使用 Bootstrap 4 中的网格系统时组合砌体布局。我想实现以下目标：

• XS设备中的两柱砌体布局
• SM 设备中的三柱砌体布局
• MD设备中的四柱砌体布局
• XL设备中的六柱砌体布局

我正在尝试此代码及其组合：

<div class="container">
<div class="row card-columns">
<div class="col-6 col-sm-4 col-md-3 col-xl-2 card">                    
<div class="card-body">Top<br><br><br>Bottom</div>
</div>
<div class="col-6 col-sm-4 col-md-3 col-xl-2 card">
<div class="card-body">Top<br>Bottom</div>
</div>
<div class="col-6 col-sm-4 col-md-3 col-xl-2 card ">
<div class="card-body">Top<br><br>Bottom</div>
</div>
<div class="col-6 col-sm-4 col-md-3 col-xl-2 card">
<div class="card-body">Top & Bottom</div>                   
</div>                    
</div>            
</div>

我认为它失败了，因为类行和卡列可能无法一起使用。引导文档如下：

卡片是使用 CSS 列属性构建的，而不是 flexbox 更容易对齐。

将卡div嵌套在行div 内的卡列div 中也不起作用。任何想法都值得赞赏。

Answer 1

我找到了这个解决方案(有趣的是，在我的 ubuntu 框中在火狐中运行良好，但在 chrome 中效果不佳......

.HTML：

<div class="card-columns">
<div class="card">                    
<div class="card-body">Top<br><br><br>Bottom</div>
</div>
<div class="card">
<div class="card-body">Top<br>Bottom</div>
</div>
<div class="card ">
<div class="card-body">Top<br><br>Bottom</div>
</div>
<div class="card">
<div class="card-body">Top & Bottom</div>                   
</div> 
<div class="card">                    
<div class="card-body">Top<br><br><br>Bottom</div>
</div>
<div class="card">
<div class="card-body">Top & Bottom</div>                   
</div> 
</div>  

自定义 CSS：

.card-columns {
column-count: 2;
}
@media (min-width: 576px) {
.card-columns {
column-count: 3;
}
}
@media (min-width: 768px) {
.card-columns {
column-count: 4;
}
}
@media (min-width: 992px) {
.card-columns {
column-count: 4;
}
}
@media (min-width: 1200px) {
.card-columns {
column-count: 6;
}
}

Answer 2

根据 Bootstrap 4 文档，每个屏幕大小的断点如下所示：

// Extra small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }
// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

要更改类砌体卡片列的列数，我们需要访问.card-columns类的column-count属性

.card-columns {
column-count: 4;
}

为了在每个断点实现特定的列计数，我们可以在媒体查询中声明上面的 CSS 规则。您正在尝试实现以下目标：

• XS设备中的两柱砌体布局
• SM 设备中的三柱砌体布局
• MD设备中的四柱砌体布局
• (在LG设备中的五柱砌体布局( ？
• XL设备中的六柱砌体布局

这是通过以下 CSS 规则实现的：

.card-columns {
column-count: 2;
}
@media (min-width: 576px) { 
.card-columns {
column-count: 3;
}
}
@media (min-width: 768px) { 
.card-columns {
column-count: 4;
}
}
@media (min-width: 992px) { 
.card-columns {
column-count: 5;
}
}
@media (min-width: 1200px) { 
.card-columns {
column-count: 6;
}
}