Bootstrap：与LESS合作，有什么好方法？

Question

我有几个问题希望您能帮助我澄清有关使用语义标记、在 bootstrap 3 mixins 中使用 less 的问题。

首先，列设置：

在非语义 html 上，您可以在 div 类 <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12"></div> 上声明 cols 作为示例。

如引导文档中所述，您应该使用.make-xx-column(@columnms) 声明给定 div 的列数，但是，如果您想复制非语义，则假定代码为：

.make-lg-column(4); .make-md-column(6); .make-sm-column(12); .make-xs-column(12);

我发现，当您使用大分辨率（超过 1200 像素）并且我定义了 .make-lg-column(4); 和 .make-md-column(6); 时，结果将显示 6 个中等列。在我的检查员上，它显示为@media (min-width: 992px)，并将统治@media (min-width: 1200px)

那么，为 div 设置不同列值的正确方法是什么？它似乎不等于您在非语义布局上设置它们的方式。

最后一个关于填充的问题，

为什么在常规引导 css 中，列在 mixins 上定义了填充（默认为 15px）时，默认填充为 0px？每次声明列数量时都会强制设置填充 (.make-lg-column(12, 30px);) ？

如果有人能以正确的方式帮助我处理这个问题，我很感激，我很抱歉，但这是我第一次使用引导程序使用 LESS 和语义 html 代码。

Answer 1

我确定这个问题有an answer on SO already，但暂时。

您应该首先调用最小网格 (xs) 的 mixins，或者更好地调用从小到宽的 mixins。 （移动优先）

上述内容是有意义的，因为网格的媒体查询是使用min-width 定义的，另请参阅http://getbootstrap.com/css/#grid。

如果您首先设置最大网格 (min-width:1200px)，然后设置 (min-width:992px)，那么对于大于 1199 像素的屏幕尺寸，两者都将评估为 true，因此最新的会覆盖第一个。

你应该使用：

.make-xs-column(12); 
.make-sm-column(12); 
.make-md-column(6); 
.make-lg-column(4);

为什么在常规引导 css 上列有定义的填充 （默认为 15px）在 mixins 上的默认填充是 0px？那 每次声明列数量时强制设置填充 (.make-lg-column(12, 30px);) ?

默认网格在列之间有 30 像素的间距（由 @grid-gutter-width 设置）。列的每边各有 15 个像素，每列之间有 2 x 15 个像素。

为什么当在常规引导 css 上的列具有定义的填充（默认为 15px）时，mixins 的默认填充为 0px？每次声明 >a column amount (.make-lg-column(12, 30px);) 时都会强制设置填充？

我发现：

@import "variables";
@import "mixins";
selector {
.make-lg-column(12, 30px);
}

编译成CSS代码如下：

selector {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}
@media (min-width: 1200px) {
  selector {
    float: left;
    width: 100%;
  }
}

Answer 2

Bootstrap 使用预定义的大小来保持响应行为，无论屏幕大小如何。我知道你在想“不管屏幕如何，1200 像素就是 1200 像素。但请记住，我们谈论的是百分比。所以，如果你要在笔记本电脑上显示一个并排有瓷砖的画廊，你会很好：

<div class="col-md-3">picture 1</div>
<div class="col-md-3">picture 2</div>
<div class="col-md-3">picture 3</div>
<div class="col-md-3">picture 4</div>

它们会非常合身并保持出色的展示效果。但是，如果在智能手机中将屏幕的宽度分成 4 种方式，情况会是这样吗？应该是太小了吧？在这种情况下，你会更好：

<div class="col-xs-12">picture 1</div>
<div class="col-xs-12">picture 2</div>
<div class="col-xs-12">picture 3</div>
<div class="col-xs-12">picture 4</div>

这样它们会显示在整个屏幕上

总的来说，理想情况下，您需要执行以下操作：

<div class="col-md-3 col-xs-12">picture 1</div>
<div class="col-md-3 col-xs-12">picture 2</div>
<div class="col-md-3 col-xs-12">picture 3</div>
<div class="col-md-3 col-xs-12">picture 4</div>

希望有所帮助