bootstrap栅格结构

bootstrap的栅格结构

bootstrap的结构被container包裹着，自动居中，不超过12列。

根据浏览器屏幕的划分：

浏览器屏幕大小：	超小屏幕(手机) (<768px)	小屏幕(平板) (≥768px)	中等屏幕 桌面显示器 (≥992px)	大屏幕 大桌面显示器 (≥1200px)
栅格系统行为	总是水平排列（只有小于768px）	开始是堆叠在一起的，当大于这些阈值时将变为水平排列C （后面三列适用）
.container 最大宽度	None （自动）	750px	970px	1170px
类前缀	.col-xs-	.col-sm-	.col-md-	.col-lg-

<div class="container">
    <ul class="row list-unstyled">  
        <li class="col-lg-3 col-md-6 col-sm-3 col-xs-6">1</li>
            <li class="col-lg-3 col-md-6 col-sm-3 col-xs-6">2</li>
        <li class="col-lg-3 col-md-6 col-sm-3 col-xs-6">3</li>
        <li class="col-lg-3 col-md-6 col-sm-3 col-xs-6">4</li>
      </ul>
</div>
代码运行的结果是：当screen≥1200px,显示为一行四列；当screen≥992px,显示为两行两列；
                当screen≥768px,显示为一行四列；当screen＜768px,显示为两行两列；
                ps：当前写的栅格结构是大于所规定的值之后才显示所写结构的样式；

列偏移

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

嵌套列

为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的 .row 元素和一系列 .col-sm- 元素到已经存在的 .col-sm- 元素内。被嵌套的行（row）所包含的列（column）的个数不能超过12（其实，没有要求你必须占满12列）。

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>
Level 1: .col-sm-9        作为父级存在
Level 2: .col-xs-8 .col-sm-6 Level 2: .col-xs-4 .col-sm-6  占满整个父级