关于bootstrap:Bootstrap列偏移

有的时候，咱们不心愿相邻的两个列紧靠在一起，但又不想应用 margin 或者其余的技术手段来。这个时候就能够应用列偏移（offset）性能来实现。应用列偏移也非常简单，只须要在列元素上增加类名“col-md-offset-*”(其中星号代表要偏移的列组合数)，那么具备这个类名的列就会向右偏移。例如，你在列元素上增加“col-md-offset-4”，示意该列向右挪动 4 个列的宽度。

<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-2 **col-md-offset-4**"> 列向右挪动四列的间距 </div>
<div class="col-md-2">.col-md-3</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 **col-md-offset-4**"> 列向右挪动四列的间距 </div>
</div>
</div>

如下面的示例代码，失去的成果如下或在最右侧后果窗口中能够看到 ( 鼠标移到后果窗口，单击呈现的全屏按钮):

实现原理非常简单，就是利用十二分之一（1/12）的 margin-left。而后有多少个 offset，就有多少个 margin-left。在 bootstrap.css 中第 1205 行～1241 行所示：

.col-md-offset-12 {margin-left: 100%;}
  .col-md-offset-11 {margin-left: 91.66666667%;}
  .col-md-offset-10 {margin-left: 83.33333333%;}
  .col-md-offset-9 {margin-left: 75%;}
  .col-md-offset-8 {margin-left: 66.66666667%;}
  .col-md-offset-7 {margin-left: 58.33333333%;}
  .col-md-offset-6 {margin-left: 50%;}
  .col-md-offset-5 {margin-left: 41.66666667%;}
  .col-md-offset-4 {margin-left: 33.33333333%;}
  .col-md-offset-3 {margin-left: 25%;}
  .col-md-offset-2 {margin-left: 16.66666667%;}
  .col-md-offset-1 {margin-left: 8.33333333%;}
  .col-md-offset-0 {margin-left: 0;}

留神：

不过有一个细节须要留神，应用”col-md-offset-*”对列进行向右偏移时，要保障列与偏移列的总数不超过 12，不然会致列断行显示，如：

<div class="row">
  <div class="col-md-3">.col-md-3</div>
  <div class="col-md-3 **col-md-offset-3**">col-md-offset-3</div>
  <div class="col-md-4">col-md-4</div>
</div>

下面代码中列和偏移列总数为 3 +3+3+4 = 13>12，所以产生了列断行。

如下面的示例代码，失去的成果如下或在最右侧后果窗口中能够看到 ( 鼠标移到后果窗口，单击呈现的全屏按钮):