更新

Question

我试图使用SASS提供的make-col（）mixin。 http://v4-alpha.getbootstrap.com/layout/grid/。我想要做的是创建两列。对于已编译的类，我要做表

我得到两个以大于sm的任何大小相邻的div。

在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.x 中，存在可用于完成网格系统特定任务的混合模块。这些是与列相关的功能：

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

来源：

Answer 2

我需要一个解决方案，所以我做了这个mixin

$xs: 480px;
$sm: 576px;
$md: 768px;
$lg: 992px;
$xl: 1200px;

@mixin break($media) {
  @if $media==xl {
    @media only screen and (min-width: $xl) {@content;}
  }
  @if $media==lg {
    @media only screen and (min-width: $lg) and (max-width:$xl - 1) {@content;}
  }
  @if $media==md {
    @media only screen and (min-width: $md) and (max-width:$lg - 1){@content;}
  }
  @else if $media==sm {
    @media only screen and (min-width:$sm) and (max-width:$md - 1){@content;}
  }
  @else if $media==xs {
    @media only screen and (min-width: $xs) and (max-width:$sm - 1){@content;}
  }
}

用法

 ul{
    @include make-row();
    li{
      list-style: none;
      @include make-col-ready();
      @include break(xl){
        @include make-col(1);
      }
      @include break(lg){
        @include make-col(2);
      }
      @include break(md){
        @include make-col(3);
      }
      @include break(sm){
        @include make-col(4);
      }
      @include break(xs){
        @include make-col(6);
      }
    }
  }

Answer 3

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

在BS4中没有mixin来创建sm，md，lg col。相反，人们可以扩展col- *类。

例如：

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

Answer 4

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

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

使用make-row mixin。

$size用于控制列的宽度。

希望它有所帮助！

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

4 个答案:

更新

用法示例