Bootstrap網格系統
Bootstrap's網格系統最多允許跨頁12列。
如果您不想單獨使用全部12列，您可以將列，共同打造更寬的列：
| 跨度1 | 跨度1 | 跨度1 | 跨度1 | 跨度1 | 跨度1 | 跨度1 | 跨度1 | 跨度1 | 跨度1 | 跨度1 | 跨度1 |
| 跨度4 | 跨度4 | 跨度4 | |||||||||
| 跨度4 | 跨度8 | ||||||||||
| 跨度6 | 跨度6 | ||||||||||
| 跨度12 | |||||||||||
Bootstrap's網格系統響應，並根據屏幕大小的列將重新安排：在大屏幕可能看起來與分三路舉辦的內容更好，但在小屏幕上會更好，如果內容項目被堆疊在彼此的頂部。
提示：請記住，網格列加起來應該有十二個一排。 更重要的是，列將堆疊無論viewport 。
網格類
該Bootstrap網格系統有四種類型：
- xs （用於手機）
- sm （平板電腦）
- md （台式機）
- lg （較大的桌面）
這些類以上可以結合起來，創造出更多的活力和靈活的佈局。
提示：每個類最高可擴展至，所以如果你想設置相同的寬度為xs和sm ，你只需要指定xs 。
網格系統規則
一些Bootstrap網格系統的規則：
- 行必須放在一個內
.container（固定寬度）或.container-fluid進行適當調整和填充（全寬） - 用行來創建列水平組
- 內容應放在列內，只列可能是行的直接子
- 預定義類，如
.row和.col-sm-4可用於快速進行網格佈局 - 列通過創建簷槽填充（列內容之間的差距）。 這是填充行偏移通過對陰性切緣第一個和最後一列
.rows - 格列由指定希望跨越12個可用的列數創建。 例如，三個相等的列將使用三個
.col-sm-4
一個基本結構Bootstrap電網
以下是一個基本的結構， Bootstrap格：
<div class="container">
<div
class="row">
<div class="col-*-*"></div>
</div>
<div
class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div
class="row">
...
</div>
</div> 所以，去創造你想要的佈局，創建一個容器（ <div class="container"> ）。 接下來，創建一個行（ <div class="row"> ）。 然後，添加的列中的期望數目（代碼具有適當.col-*-*的類）。 注意，在數字.col-*-*應該總是加起來12的每一行。
網格選項
下表總結了如何Bootstrap網格系統跨多個設備的工作原理：
| Extra small devices Phones (<768px) |
Small devices Tablets (>=768px) |
Medium devices Desktops (>=992px) |
Large devices Desktops (>=1200px) |
|
|---|---|---|---|---|
| Grid behaviour | Horizontal at all times | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints |
| Container width | None (auto) | 750px | 970px | 1170px |
| Class prefix | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| Number of columns | 12 | 12 | 12 | 12 |
| Column width | Auto | ~62px | ~81px | ~97px |
| Gutter width | 30px (15px on each side of a column) | 30px (15px on each side of a column) | 30px (15px on each side of a column) | 30px (15px on each side of a column) |
| Nestable | Yes | Yes | Yes | Yes |
| Offsets | Yes | Yes | Yes | Yes |
| Column ordering | Yes | Yes | Yes | Yes |
例子
下面的章節顯示為不同的設備的網格系統的例子：