Bootstrap 4（Alpha 3）：卡片列 - 自定义列数

Posted 2023-03-05

【中文标题】Bootstrap 4（Alpha 3）：卡片列 - 自定义列数

【英文标题】：Bootstrap 4 (Alpha 3): card columns - customized number of columns

【发布时间】：2016-12-25 01:37:31

【问题描述】：

我在 Bootstrap 4 (Alpha 3) Card Colums 中使用并尝试自定义列数。 Docs中有如下例子：

.card-columns 
      @include media-breakpoint-only(lg) 
        column-count: 4;
      
      @include media-breakpoint-only(xl) 
        column-count: 5;
      
    

由于默认列数为 3（除了 sm 设备），我尝试将默认值减少到 2 列，在附加的 CSS 文件中使用以下代码（在 Bootstrap CSS 之后）：

.card-columns 
  @include media-breakpoint-only(sm) 
    column-count: 2;
  
  @include media-breakpoint-only(md) 
    column-count: 2;
  
  @include media-breakpoint-only(lg) 
    column-count: 2;
  
  @include media-breakpoint-only(xl) 
    column-count: 2;
  

但是，不幸的是，结果仍然是 3 列。我做错了什么？

非常感谢您的帮助！

【问题讨论】：

启用 SASS 后，它可以工作：codeply.com/go/nHZg5n2vuE

谢谢。不，我需要了解如何启用 SASS ...（相关文档 [v4-alpha.getbootstrap.com/getting-started/best-practices/] 似乎还没有准备好）。

Bootstrap 4 - Responsive cards in card-columns的可能重复

【参考方案1】：

您需要使用@media CSS 标记。在网站的 CSS 文件中使用下面的 CSS 代码，您应该一切顺利。

@media (min-width: 576px) and (max-width: 768px)

    .card-columns 
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
    

“列数”属性是您需要更改的全部内容。

您可以将min-width 和max-width 更改为任何引导网格选项以获得所需的结果。参考Bootstraps Grid Options。

【参考方案2】：

您可以使用 SASS 更改 media-breakpoint-only..

.card-columns 
  @include media-breakpoint-only(xl) 
    column-count: 5;
  
  @include media-breakpoint-only(lg) 
    column-count: 4;
  
  @include media-breakpoint-only(md) 
    column-count: 3;
  
  @include media-breakpoint-only(sm) 
    column-count: 2;
  

工作演示：http://codeply.com/go/nHZg5n2vuE

【讨论】：

你能补充一下没有 SASS 的情况吗

查看此 Q/A ***.com/questions/34140793/…