Bootstrap布局容器与栅格系统

• 布局容器
  • Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种 容器类不能互相嵌套。
  • .container 类用于固定宽度并支持响应式布局的容器。

  <div class="container">
    ...
  </div>

  • .container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器，流式布局容器。

  <div class="container-fluid">
    ...
  </div>

• 栅格系统
  • 每行总列数是12
  • 栅格参数
    • col-xs-适用于超小屏幕 手机 (<768px)
    • col-sm-适用于小屏幕 平板 (≥768px)
    • col-md-适用于中等屏幕 桌面显示器 (≥992px)
    • col-lg-适用于大屏幕 大桌面显示器 (≥1200px)
    • col-xl-适用于