ブートストラップグリッド-スタックから水平

ブートストラップグリッドの例：スタックから水平へ

大きなデバイスで水平になる前に、非常に小さなデバイスでスタックすることから始まる基本的なグリッドシステムを作成します。

次の例は、単純な「スタックから水平」の2列レイアウトを示しています。つまり、自動的にスタック（100％）される非常に小さな画面を除いて、すべての画面で50％/ 50％に分割されます。

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-11列に.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>

❮ 前次 ❯

ブートストラップ3チュートリアル