如何在 Twitter bootstrap sass 中创建列（alpha 4）

Question

我正在尝试使用 Bootstrap 提供的

make-col()

Sass mixin。 http://v4-alpha.getbootstrap.com/layout/grid/。我想做的是创建两列。通过编译的类，我能够做到：

<div class="row">
    <div class="col-sm-3"></div>
    <div class="col-sm-9"></div>
</div>

我得到两个 div，它们在任何大于

sm

的窗口大小中彼此相邻浮动。

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

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

它确实使两者相邻浮动，但是当我缩小屏幕时，两者不会被遮挡。它们仍然漂浮。使用 mixin 时如何让 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 备忘单

Answer 2

没有关于 col mixins 的详细信息。根据我的实验：

BS4 中没有用于创建 sm、md、lg col 的 mixins。相反，我们可以扩展 col-* 类。

例如：

.product-gallery-list-item {
  @extend .col-md-6;
}

Answer 3

我认为你需要一个列的包装器，或者一个父容器。

<div class="row">
    <div class="col-sm-3"></div>
    <div class="col-sm-9"></div>
</div>

为此使用

make-row

mixin。

$size

用于控制列的宽度。

希望有帮助！