css - ブートストラップ流体行幅

Question

bootstrap-sensitive.cssで

.row-fluid .span10{
    width: 91.45299145299145%;
    *width: 91.39979996362975%;
}

サイズを設定していましたが、これらの数値をどのように導き出したのか、そしてなぜ小数点以下14桁まで正確なのか知りたいのですが。

Answer 1

これらは、ユーザー定義可能な3つの値で始まります。

@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は除算と乗算を行います。

自分で見てください：

1. https://github.com/twitter/bootstrap/blob/master/less/variables.less
2. https://github.com/twitter/bootstrap/blob/master/less/mixins.less