在bootstrap-responsive.css中
.row-fluid .span10{
width: 91.45299145299145%;
*width: 91.39979996362975%;
}
我正在配置大小,但我很好奇他们如何得出这些数字,为什么它们精确到14位小数？
解决方法
它们以三个值开头,可以是用户定义的：
@gridColumns: 12; @gridColumnWidth: 60px; @gridGutterWidth: 20px;
编辑：在Bootstrap 3.0上,变量现在是：
@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);
最后,生成所有跨度(这有点令人困惑)：
.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做分裂和乘法.
自己看看：
> https://github.com/twitter/bootstrap/blob/master/less/variables.less
> https://github.com/twitter/bootstrap/blob/master/less/mixins.less
