Bootstrapグリッド例：積み上げ-に水平
私たちは、デスクトップ（大/中デバイス）に水平になる前に、モバイル/タブレット（小型デバイス）上に積層から始まり、基本的なグリッドシステムを作成します。
次の例では、それが自動的に（100％）スタックします余分な小さな画面を除いて、すべての画面で50％/ 50％の分割になります意味、単純な「積層に水平「2列のレイアウトを示しています。
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> »それを自分で試してみてください