css - 如何在 Twitter bootstrap sass 中创建列(alpha 4)

Question

我正在尝试使用 SASS 提供的 make-col() mixin。 http://v4-alpha.getbootstrap.com/layout/grid/ .我想要做的是创建两列。使用已编译的类，我可以做




我得到两个 div，它们以任何大于 sm 的大小彼此相邻 float .

在 Bootstrap Sass 中(我在 React 中使用它)，当我这样做时:

.row {
    @include make-row()
}
.left {
    @include make-col(3)
}
.right {
    @include make-col(9);
}

它确实使两者相邻 float ，但是当我将屏幕缩小时，两者不会被遮挡。它们保持 float 。使用 mixins 时，如何让 Bootstrap 镜像上述示例。

顺便说一句，从文档中:@mixin make-col($size, $columns: $grid-columns, $gutter: $grid-gutter-width) - 究竟是什么size ?是列数吗？我很困惑，因为还有一个 $columns多变的。

Answer 1

更新

在 Bootstrap 4.1< ，有可用于完成网格系统特定任务的 mixin。这些是与列相关的功能:

@include make-col-ready()
@include make-col($size, $columns: $grid-columns)
@include make-col-offset($size, $columns: $grid-columns)

示例用法

HTML

<div class="example-container">
  <div class="example-row">
    <div class="example-content-main">Main content</div>
    <div class="example-content-secondary">Secondary content</div>
  </div>
</div>

萨斯

.example-container {
    width: 800px;
    @include make-container();
}
.example-row {
    @include make-row();
}
.example-content-main {
    @include make-col-ready();

    @include media-breakpoint-up(sm) {
        @include make-col(6);
    }
    @include media-breakpoint-up(lg) {
        @include make-col(8);
    }
}
.example-content-secondary {
    @include make-col-ready();

    @include media-breakpoint-up(sm) {
        @include make-col(6);
    }
    @include media-breakpoint-up(lg) {
        @include make-col(4);
    }
}

资料来源:

Official Documentation

Bootstrap Mixins Cheatsheet