Bootstrap 网格系统（Grid System）

<div class="container">
    <div class="row" >
        <div class="col-xs-6 col-sm-3"
             style="background-color: #dedef8;
            box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
        <div class="col-xs-6 col-sm-3"
             style="background-color: #dedef8;box-shadow:
        inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
                enim ad minim veniam, quis nostrud exercitation ullamco laboris
                nisi ut aliquip ex ea commodo consequat.
            </p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
                eiusmod tempor incididunt ut.
            </p>
        </div>

        <div class="clearfix visible-xs"></div>

        <div class="col-xs-6 col-sm-3"
             style="background-color: #dedef8;
        box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco
                laboris nisi ut aliquip ex ea commodo consequat.
            </p>
        </div>
        <div class="col-xs-6 col-sm-3"
             style="background-color: #dedef8;box-shadow:
        inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
                enim ad minim
            </p>
        </div>
    </div>
</div>

网格系统通过一系列包含内容的行和列来创建页面布局。下面列出了 Bootstrap 网格系统是如何工作的：

• 行必须放置在 .container class 内，以便获得适当的对齐（alignment）和内边距（padding）。
• 使用行来创建列的水平组。
• 内容应该放置在列内，且唯有列可以是行的直接子元素。
• 预定义的网格类，比如 .row 和 .col-xs-4，可用于快速创建网格布局。LESS 混合类可用于更多语义布局。
• 列通过内边距（padding）来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距（margin）取负，表示第一列和最后一列的行偏移。
• 网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如，要创建三个相等的列，则使用三个 .col-xs-4。

如果要清除浮动用

<div class="clearfix visible-xs"></div>

例如，如果加上这句话，那么将col-xs-6改为col-xs-4时为如下效果：

即使后面存在一个位置但第三个div仍然不会上来。

如果不加上这句话，那么将col-xs-6改为col-xs-4时为如下效果：

发现第三个div会往上面浮动，因为这时我们允许浮动，如果在这个基础上再将第四个div改成col-xs-4，又将出现下面的结果：