Bootstrap 網格 - 小型裝置
Bootstrap 網格示例:小型裝置
超小屏 | 小 | 中 | 大 | |
---|---|---|---|---|
類字首 | .col-xs |
.col-sm |
.col-md |
.col-lg |
螢幕寬度 | <768px | >=768px | >=992px | >=1200px |
假設我們有一個簡單的兩欄佈局。我們希望對於小號裝置,欄的寬度比例為 25%/75%。
提示:小型裝置定義為螢幕寬度在 768 畫素到 991 畫素之間。
對於小號裝置,我們將使用 .col-sm-*
類。
我們將為我們的兩欄新增以下類
<div class="col-sm-3">....</div>
<div class="col-sm-9">....</div>
Bootstrap 現在會說“在小型裝置上,查詢帶有 -sm- 的類並使用它們”。
下面的示例將在小型(以及中型和大型)裝置上產生 25%/75% 的分割。在超小型裝置上,它將自動堆疊(100%)。
col-sm-3
col-sm-9
示例
<div class="container-fluid">
<h1>Hello World!</h1>
<div class="row">
<div class="col-sm-3" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-9" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
自己動手試一試 »注意:確保總和始終為 12。
要實現 33.3%/66.6% 的分割,您可以使用 .col-sm-4
和 .col-sm-8
。
col-sm-4
col-sm-8
示例
<div class="container-fluid">
<h1>Hello World!</h1>
<div class="row">
<div class="col-sm-4" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-8" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
自己動手試一試 »下一章將展示如何為中號裝置新增不同的分割百分比。