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

Question

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

我得到两个 div，它们以任何大于sm.

在 Bootstrap Sass 中（我在 React 中使用它），当我这样做时：

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

它确实将两个浮动在一起，但是当我缩小屏幕时，两者不会被挡住。它们保持漂浮状态。使用 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>

SASS

.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);
    }
}

资料来源：

• 官方文档
• Bootstrap Mixins 备忘单