Bootstrap內(nèi)置了一個(gè)響應(yīng)式的柵格系統(tǒng)，可以在不同設(shè)備窗口下自動調(diào)整和布局。這個(gè)流式柵格系統(tǒng)一共分為12列，通過行（row）和列（column）的組合來創(chuàng)建頁面布局。 使用container和

Bootstrap內(nèi)置了一個(gè)響應(yīng)式的柵格系統(tǒng)，可以在不同設(shè)備窗口下自動調(diào)整和布局。這個(gè)流式柵格系統(tǒng)一共分為12列，通過行（row）和列（column）的組合來創(chuàng)建頁面布局。

使用container和row

在使用柵格系統(tǒng)之前，需要將row放入container中。row在水平方向上創(chuàng)建一組column，容器會幫助我們對齊和居中內(nèi)容。

設(shè)置柵格系統(tǒng)的列寬

柵格系統(tǒng)的列寬是通過1到12的值來表示跨越的范圍。例如，如果我們想要創(chuàng)建4個(gè)等寬的列，可以使用col-xs-3來定義每個(gè)列的寬度。

添加間隔和填充

如果我們想要在列與列之間添加一定的間隔，可以使用padding屬性來指定。創(chuàng)建一個(gè)包含柵格系統(tǒng)的HTML代碼，并在body中添加以下代碼：

lt;div class"container"gt;
  lt;div class"row"gt;
    lt;div class"col-xs-3" style"padding: 10px;"gt;Module 1lt;/divgt;
    lt;div class"col-xs-3" style"padding: 10px;"gt;Module 2lt;/divgt;
    lt;div class"col-xs-3" style"padding: 10px;"gt;Module 3lt;/divgt;
    lt;div class"col-xs-3" style"padding: 10px;"gt;Module 4lt;/divgt;
  lt;/divgt;
lt;/divgt;

通過給每個(gè)列添加padding屬性，我們可以在列與列之間創(chuàng)建指定的間隔。

顯示模塊內(nèi)容在一行上

如果我們想要將幾個(gè)模塊的內(nèi)容顯示在一行上，并且每個(gè)模塊的寬度一樣，可以使用row來包裹這些模塊，并通過col-xs-3來設(shè)置每個(gè)模塊的寬度：

lt;div class"row"gt;
  lt;div class"col-xs-3"gt;Module 1lt;/divgt;
  lt;div class"col-xs-3"gt;Module 2lt;/divgt;
  lt;div class"col-xs-3"gt;Module 3lt;/divgt;
  lt;div class"col-xs-3"gt;Module 4lt;/divgt;
lt;/divgt;

以上代碼將會把這些模塊的內(nèi)容顯示在一行上，并且每個(gè)模塊的寬度相等。

最終效果

運(yùn)行以上代碼后，你會看到編寫的模塊內(nèi)容占滿了網(wǎng)頁全屏，并且每個(gè)模塊的寬度都一樣。