自举流体行宽
问题描述：
in bootstrap-responsive.css
in bootstrap-responsive.css
.row-fluid .span10{
width: 91.45299145299145%;
*width: 91.39979996362975%;
}
我正在配置大小，但我很好奇他们如何导出这些数字
I was configuring the sizing, but am curious as to how they derived these numbers, and why are they accurate to 14 decimal places?
答
它们以三个值开始，可以由用户定义：
They start with three values, which can be user-defined:
@gridColumns: 12;
@gridColumnWidth: 60px;
@gridGutterWidth: 20px;
编辑 p>
on Bootstrap 3.0+, the variables are now:
@grid-columns
@grid-gutter-width
@grid-float-breakpoint // the point at which the navbar stops collapsing
并计算固定行宽度：
@gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
然后他们流畅：
@fluidGridColumnWidth: percentage(@gridColumnWidth/@gridRowWidth);
@fluidGridGutterWidth: percentage(@gridGutterWidth/@gridRowWidth);
最后，生成所有跨度（这有点令人困惑）：
And finaly, generate all the spans (that is a bit confusing):
.spanX (@index) when (@index > 0) {
(~".span@{index}") { .span(@index); }
.spanX(@index - 1);
}
.span (@columns) {
width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1));
*width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%);
}
.row-fluid {
// generate .spanX and .offsetX
.spanX (@gridColumns);
.offsetX (@gridColumns);
}
正如你看到的，LESS执行除法和乘法。
As you see, LESS does the divisions and multiplications.
自行查看：
- https://github.com/twitter/bootstrap/blob/master/less/variables.less
- https://github.com/twitter/bootstrap/ blob / master / less / mixins.less
- https://github.com/twitter/bootstrap/blob/master/less/variables.less
- https://github.com/twitter/bootstrap/blob/master/less/mixins.less