CSS Bootstrap 栅格系统

Bootstrap默认的栅格系统为12列 ，形成一个940px宽的容器，对于简单的两列式布局，创建一个 .row 容器，并在容器中加入合适数量的 .span* 列即可。由于默认是12列的栅格，所有 .span* 列所跨越的栅格数之和最多是12(或者等于其父容器的栅格数)。

带有基本栅格的HTML代码

<div class="row">
  <div class="span4">...</div>
  <div class="span8">...</div>
</div>

上面的代码展示了  .span4 和 .span8  两列，两列的和总共是12个栅格。

偏移列

把列向右移动可使用 .offset* 类。每个类都给列的左边距增加了指定单位的列。例如，.offset4 将 .span4 右移了4个列的宽度。

<div class="row">
  <div class="span4">...</div>
  <div class="span3 offset2">...</div>
</div>

Bootstrap的每个span*的外边距为20px，所以Bootstrap的940px = (12 * 60px) + (11 * 20px)，因为12个span中有11个外边距，

每个span*的计算：(n * 60px) + (n - 1) * 20px，所以span1为60px，span2为140px，以此类推，因为n个span中有n-1个外边距，所以得出上述计算公式。

上述有12个span1，每个span1的宽度为60px，中间有11个外边距，可以验证上面的计算公式。

每个偏移的计算为：(60px + 20px) * n + 20px，所以offset1的外边距为100px，offset2的外边距为180px，以此类推。。

上图中，若想将span2偏移到span3所在的位置，可知原本span2左边的外边距20px + span的宽度60px + span2右边的外边距20px = offset1的margin-left: 100px; 如想将span2偏移offset2到span4的位置，可知offset2 = 20px + (60px + 20px) * 2 = 180px

Bootstrap实现栅格系统的CSS代码：

.row {
  margin-left: -20px;
  *zoom: 1;
}

.row:before,
.row:after {
  display: table;
  line-height: 0;
  content: "";
}

.row:after {
  clear: both;
}
.span12 {
  width: 940px;
}

.span11 {
  width: 860px;
}

.span10 {
  width: 780px;
}

.span9 {
  width: 700px;
}

.span8 {
  width: 620px;
}

.span7 {
  width: 540px;
}

.span6 {
  width: 460px;
}

.span5 {
  width: 380px;
}

.span4 {
  width: 300px;
}

.span3 {
  width: 220px;
}

.span2 {
  width: 140px;
}

.span1 {
  width: 60px;
}
[class*="span"] {
  float: left;
  min-height: 1px;
  margin-left: 20px;
}
.offset12 {
  margin-left: 980px;
}

.offset11 {
  margin-left: 900px;
}

.offset10 {
  margin-left: 820px;
}

.offset9 {
  margin-left: 740px;
}

.offset8 {
  margin-left: 660px;
}

.offset7 {
  margin-left: 580px;
}

.offset6 {
  margin-left: 500px;
}

.offset5 {
  margin-left: 420px;
}

.offset4 {
  margin-left: 340px;
}

.offset3 {
  margin-left: 260px;
}

.offset2 {
  margin-left: 180px;
}

.offset1 {
  margin-left: 100px;
}