##布局-柵格 ~~~ .container{ /*容器 根據@media(min-width)定義不同寬度 */ } .container-fluid{ /*容器 width:100% */ } .clearfix{ /*隱藏 清除浮動 */ } ~~~ <table class="table table-bordered table-striped"> <thead> <tr> <th> &nbsp;</th> <th> 超小屏幕 <small>手機 (&lt;768px)</small></th> <th> 小屏幕 <small>平板 (≥768px)</small></th> <th> 中等屏幕 <small>桌面顯示器 (≥992px)</small></th> <th> 大屏幕 <small>大桌面顯示器 (≥1200px)</small></th> </tr> </thead> <tbody> <tr> <th class="text-nowrap" scope="row"> 柵格系統行為</th> <td>總是水平排列</td> <td colspan="3">開始是堆疊在一起的，當大于這些閾值時將變為水平排列C</td> </tr> <tr> <th class="text-nowrap" scope="row"> <code>.container</code> 最大寬度</th> <td>None （自動）</td> <td>750px</td> <td>970px</td> <td>1170px</td> </tr> <tr> <th class="text-nowrap" scope="row"> 類前綴</th> <td><code>.col-xs-</code></td> <td><code>.col-sm-</code></td> <td><code>.col-md-</code></td> <td><code>.col-lg-</code></td> </tr> <tr> <th class="text-nowrap" scope="row"> 列（column）數</th> <td colspan="4">12</td> </tr> <tr> <th class="text-nowrap" scope="row"> 最大列（column）寬</th> <td class="text-muted">自動</td> <td>~62px</td> <td>~81px</td> <td>~97px</td> </tr> <tr> <th class="text-nowrap" scope="row"> 槽（gutter）寬</th> <td colspan="4">30px （每列左右均有 15px）</td> </tr> <tr> <th class="text-nowrap" scope="row"> 可嵌套</th> <td colspan="4">是</td> </tr> <tr> <th class="text-nowrap" scope="row"> 偏移（Offsets）</th> <td colspan="4">是</td> </tr> <tr> <th class="text-nowrap" scope="row"> 列排序</th> <td colspan="4">是</td> </tr> </tbody> </table>