基础

全局css样式

https://v3.bootcss.com/css/#grid

<div class="container">
  <div class="row">
    <div class="col-md-1">1</div>
    <div class="col-md-1">3</div>
    <div class="col-md-1">...</div>
    <div class="col-md-1">12</div>
  </div>
</div>

栅格参数

通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。

列偏移

使用 .col-md-offset- 类可以将列向右侧偏移。这些类实际是通过使用 选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。

<div class="col-md-5 col-md-offset-4"></div>  // 元素向右侧偏移了4个列

列排序

通过使用 .col-md-push- 和 .col-md-pull- 类就可以很容易的改变列（column）的顺序。

<div class="col-md-5 col-md-push-7">5</div>   // 元素向右移动7个单元
<div class="col-md-5 col-md-pull-5">7</div>   // 元素向左移动5个单元

快速浮动

通过添加一个类，可以将任意元素向左或向右浮动。!important 被用来明确 CSS 样式的优先级。这些类还可以作为 mixin（参见 less 文档） 使用。

<div class="pull-left">...</div>
<div class="pull-right">...</div>