Question

我有几个问题，希望你能帮我澄清一下使用语义标记，使用bootstrap 3 mixins时少用。

首先，列设置：

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

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

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

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

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

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

为什么在常规bootstrap css上，该列在mixins上有一个定义的填充（默认为15px），默认填充为0px？每次声明一个列数时都强制设置填充（.make-lg-column（12,30px）;）？

我很感激有人可以帮助我以正确的方式解决这个问题，很抱歉，这是我第一次使用bootstrap处理LESS和语义HTML代码。

Answer 1

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

您应首先调用最小网格（xs）的mixins，或者更好地调用mixins从小到宽。（首先是移动类型）

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

如果您先设置最大网格（最小宽度：1200px），则后跟（最小宽度：992px），那么对于大于1199像素的屏幕尺寸，两者都将评估为真，因此最新覆盖第一个。

您应该使用：

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

为什么在常规引导程序css上，列具有已定义的填充（在默认情况下为15px）默认填充为0px？那每次声明列数时强制设置填充（.make-lg-column（12,30px）;）？

默认网格在列之间有30个像素的排水沟（由@ grid-gutter-width设置）。列的每一侧有15个像素，每列之间的像素为2 x 15像素。

为什么在常规bootstrap css上，列在＆gt; mixins上有一个定义的填充（默认为15px），默认填充为0px？每次声明＆gt;列数量时，强制设置填充（.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使用预定义的大小调整来维护响应行为，而不管屏幕大小如何。我知道你在思考＆＃34; 1200px是1200px，无论屏幕如何。但请记住，我们正在谈论百分比。所以，如果你打算在笔记本电脑中左右显示一个带有瓷砖的画廊，你可以这样做：

<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>

它们可以很好地适应并保持良好的显示效果。但如果在智能手机中将屏幕的宽度分成四个方向，情况会是这样吗？可能太小了吧？在这种情况下，你会更好：

<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>

希望有所帮助

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

2 个答案: