Question

我在Bootstrap 4（Alpha 3）Card Colums中使用并尝试自定义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列。我做错了什么？

非常感谢你的帮助！

Answer 1

您可以使用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

Answer 2

您需要使用@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网格选项，以获得所需的结果。有关请求，请参阅Bootstraps Grid Options。

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

2 个答案: