BOOTSTRAP栅格系统解析

BOOTSTRAP 栅格系统

---

布局容器

Bootstrap需要为栅格系统包裹一个.container的容器,栅格系统中，浏览器会随着屏幕的大小增减自动分配最多12个列。通过行和列的组合来创建布局。

工作原理

1. 行（row）必须包裹在.container中。
2. 通过行（row）在水平方向创建列。
3. 你的内容应该放在列（column）内部，只有列（column）才能做行（row）的子元素。
4. 如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column） ”
   所在的元素将被作为一个整体另起一行排列。栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ，并且针对小屏幕设备覆盖栅格类。

代码块

代码块语法遵循标准markdown代码，例如：

//四种屏幕全部激活
<div class="container">
    <div class="row">
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">1</div>
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">1</div>
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">1</div>
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">1</div>
    <div/>
<div/>