Bootstrap 栅格原理

栅格嵌套

The trick here is that the column acts the same way as a container, it has 15px of padding that allows the row’s negative 15px of margin to overlay it.

.container
  margin: 0 15px

  .row
    margin: 0 -15px

    .column
      margin: 0 15px

      .row
        .column

其他功能实现方式：

Offsets： margin
Push and Pull: positioning, 注意重叠问题

自适应

通过媒体查询，定义 class 在不同尺寸屏幕的样式。

/* 超小设备（手机，小于 768px） xs*/
/* Bootstrap 中默认情况下没有媒体查询 */

/* 小型设备（平板电脑，768px 起）sm */
@media (min-width: @screen-sm-min) { ... }

/* 中型设备（台式电脑，992px 起） md */
@media (min-width: @screen-md-min) { ... }

/* 大型设备（大台式电脑，1200px 起） lg */
@media (min-width: @screen-lg-min) { ... }

<div class="container">
    <h1>Hello, world!</h1>
    <div class="row">
        <div class="col-sm-1 col-md-6 col-lg-8 col-xs-6">

        </div>

        <div class="col-sm-11 col-md-6 col-lg-4 col-xs-6">

        </div>
    </div>
</div>

参考

• The Subtle Magic Behind Why the Bootstrap 3 Grid Works (opens new window)