bootstrap-4 - Bootstrap 4 - 结合网格系统的砌体布局(二、三、四、六列布局)
问题描述
我正在尝试在使用 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>
我认为它失败了,因为类行和卡片列可能不能一起使用。Bootstrap 文档如下:
卡片是使用 CSS 列属性而不是 flexbox 构建的,以便于对齐。
将卡片div嵌套在行div内的卡片列div 中也不起作用。任何想法表示赞赏。
解决方案
我找到了这个解决方案(有趣的是,我的 ubuntu 盒子在 Firefox 中运行良好,但在 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;
}
}