Question

尝试使用Bootstraps official SCSS但在编译col-xs-1, col-sm-1, col-md-1, col-lg-1后，常见的网格样式中都缺少这些内容：

示例：

**.col-xs-, .col-sm-, .col-md-, .col-lg-,** .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}

我在哪里可以找到此列列表的来源？

Answer 1

我在哪里可以找到此列列表的来源？

您可以找到此代码here。 assets/stylesheets/bootstrap/mixins/_grid-framework.scss中的这个mixin如下所示：

// [converter] This is defined recursively in LESS, but Sass supports real loops
@mixin make-grid-columns($i: 1, $list: ".col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}") {
@for $i from (1 + 1) through $grid-columns {
$list: "#{$list}, .col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}";
}
#{$list} {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: ($grid-gutter-width / 2);
padding-right: ($grid-gutter-width / 2);
}
}

上述mixin将被称为here

即使用默认的其他参数调用mixin，我也不认为它会产生你问题中描述的输出。所以可能一些后处理器会破坏你编译的代码。

1个宽度列的Bootstrap scss编译错误

1 个答案: