Bootstrap 4 - 结合网格系统的砌体布局（二、三、四和六列布局）[重复]答案

【问题标题】：Bootstrap 4 - Masonry layout combined with the grid system (two, three, four and six column layout) [duplicate]Bootstrap 4 - 结合网格系统的砌体布局（二、三、四和六列布局）[重复]
【发布时间】：2023-04-05 03:54:01
【问题描述】：

我正在尝试在 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 中也不起作用。任何想法都表示赞赏。

【问题讨论】：

标签： bootstrap-4 masonry grid-system

【解决方案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;
   }
}

【讨论】：