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>

参考

Last Updated: 9/12/2019, 9:04:42 AM