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

I have a couple of questions I hope you help me to clarify about working with semantic markup, using less with bootstrap 3 mixins.

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

First, columns setup:

首先，列设置：

On a non-semantic html you'd declare the cols on the div class <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12"></div> as example.

在非语义html上，您将声明div类

上的cols作为示例。

As stated on bootstrap documentation you should declare the amount of columns for a given div with the .make-xx-column(@columnms), but, if you want to replicate the non-semantic it's supposed that code would be:

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

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

With this I found that when you are on a big resolution (more than 1200px) and if I have defined .make-lg-column(4); and .make-md-column(6); the result will be the 6 medium columns will be showed. On my inspector it shows as @media (min-width: 992px) and will rule over the @media (min-width: 1200px)

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

What is then, the correct way to set the different column values for a div? It seems to not be equal to how you'd set them up on a non-semantic layout.

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

Finally a question about padding,

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

Why when on the regular bootstrap css the column has a defined padding (15px as default) on the mixins the default padding is 0px? That forces to set the padding each time you declare a column amount (.make-lg-column(12, 30px);) ?

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

I appreciate if someone can help me working with this the right way, I'm sorry but It's the first time I work with LESS and semantic html code with bootstrap.

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

2 个解决方案

#1

I'm sure that this question has an answer on SO already, but for the time being.

我确信这个问题已经对SO有了答案，但暂时还是如此。

You should call the mixins for the smallest grid (xs) first, or better call the mixins from small to width. (kind of mobile first)

您应该首先调用mixins作为最小网格（xs），或者更好地调用mixins从小到宽。（首先是手机）

The above make sense because of the media queries for the grid are defined with min-width, see also http://getbootstrap.com/css/#grid.

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

If you set the largest grid first (min-width:1200px) follow by (min-width:992px) then both will evaluate true for screensize wider than 1199 pixels, and so the latest override the first.

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

You should use:

你应该使用：

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

Why when on the regular bootstrap css the column has a defined padding (15px as default) on the mixins the default padding is 0px? That forces to set the padding each time you declare a column amount (.make-lg-column(12, 30px);) ?

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

The default grids have a gutter of 30 pixels (set by @grid-gutter-width) between the columns. 15 pixels on each side of the columns, makes 2 x 15 pixels between each column.

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

Why when on the regular bootstrap css the column has a defined padding (15px as default) on >the mixins the default padding is 0px? That forces to set the padding each time you declare >a column amount (.make-lg-column(12, 30px);) ?

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

I found that:

我找到：

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

compiles into CSS code as follows:

编译成CSS代码如下：

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

#2

-2

Bootstrap uses predefined sizing to maintain responsiveness behavior regardless of the screen size. I know you are thinking "1200px is 1200px regardless the screen. But remember we are talking about percentages. So, if you were going to display a gallery with a tiles side to side in a laptop, you'll be fine with:

无论屏幕大小如何，Bootstrap都使用预定义的大小调整来维护响应行为。我知道你在想“无论屏幕是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>

They will fit just fine and keep a great display. But will that be the case if the split the width of the screen 4 ways in a smartphone? Probably too small, right? In that case, you'll be better off with:

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

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

This way they display accross the entire screen

这样他们就可以在整个屏幕上显示

In summary, ideally, you'd want to do the following:

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

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

Hope that helped

希望有所帮助

#1