Bootstrap 網格 - 堆疊到水平
Bootstrap 網格示例：堆疊到水平
我們將建立一個基本的網格系統，它在超小裝置上堆疊，然後在較大的裝置上變為水平。
以下示例顯示了一個簡單的“堆疊到水平”的兩列布局，這意味著它將在所有螢幕上實現 50%/50% 的分割，但對於超小螢幕，它將自動堆疊（100%）。
col-sm-6
col-sm-6
示例：堆疊到水平
<div class="container">
<h1>Hello World!</h1>
<div class="row">
<div class="col-sm-6" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-6" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
自己動手試一試 »提示：.col-sm-* 類中的數字表示該 div 應跨越多少列（總共 12 列）。因此，.col-sm-1 跨越 1 列，.col-sm-4 跨越 4 列，.col-sm-6 跨越 6 列，依此類推。
注意：確保總和始終加起來等於 12！
提示：透過將 .container 類更改為 .container-fluid，可以將任何固定寬度佈局轉換為全寬佈局。
示例：流體容器
<div class="container-fluid">
<h1>Hello World!</h1>
<div class="row">
<div class="col-sm-6" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-6" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
自己動手試一試 »
