<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，又將出現下面的結果：