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> 試一試»