Bootstrap 4 - 结合网格系统的砌体布局(二、三、四和六列布局)[重复]
Posted
技术标签:
【中文标题】Bootstrap 4 - 结合网格系统的砌体布局(二、三、四和六列布局)[重复]【英文标题】:Bootstrap 4 - Masonry layout combined with the grid system (two, three, four and six column layout) [duplicate] 【发布时间】:2018-12-14 10:37:22 【问题描述】:我正在尝试在 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 构建的 更容易对齐。
将 card div 嵌套在 row div 内的 card-columns div 中也不起作用。任何想法都表示赞赏。
【问题讨论】:
【参考方案1】:我找到了这个解决方案(有趣的是,我的 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;
【讨论】:
【参考方案2】:根据Bootstrap 4 documentation,每个屏幕尺寸的断点如下:
// 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;
要在每个断点处实现特定的列数,我们可以在 media query 中声明上面的 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;
【讨论】:
以上是关于Bootstrap 4 - 结合网格系统的砌体布局(二、三、四和六列布局)[重复]的主要内容,如果未能解决你的问题,请参考以下文章
如何仅使用 bootstrap 3 网格系统和 css 创建砌体效果
从 Bootstrap 3 迁移的 Bootstrap 4 网格布局问题