ブートストラップグリッド-大型デバイス

ブートストラップグリッドの例：大型デバイス

	Extra small	Small	Medium	Large
Class prefix	`.col-xs`	`.col-sm`	`.col-md`	`.col-lg`
Screen width	<768px	>=768px	>=992px	>=1200px

前の章では、中小規模のデバイスのクラスを使用したグリッドの例を示しました。2つのdiv（列）を使用し、小型デバイスでは25％/ 75％に分割し、中型デバイスでは50％/ 50％に分割しました。

ただし、大規模なデバイスでは、33％/ 66％の分割として設計の方が優れている場合があります。

ヒント：大型デバイスは、画面幅が 1200ピクセル以上であると定義されています。

大型デバイスの場合、.col-lg-*クラスを使用します。

そこで、大型デバイスの列幅を追加します。

Bootstrapは、「小さいサイズでは、-sm-が含まれているクラスを見て、それらを使用します。中サイズでは、-md-が含まれているクラスを見て、それらを使用します。大きいサイズでは、 -lg-という単語が含まれているクラスとそれらを使用します。

次の例では、小さいデバイスで25％/ 75％に分割され、中程度のデバイスで50％/ 50％に分割され、大きいデバイスで33％/ 66％に分割されます。

例

<div class="container-fluid">
<h1>Hello World!</h1>
<div class="row">
    <div class="col-sm-3 col-md-6 col-lg-4" style="background-color:yellow;">
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-sm-9 col-md-6 col-lg-8" style="background-color:pink;">
      <p>Sed ut perspiciatis...</p>
    </div>
</div>
</div>

注：合計が常に12になるようにしてください。

大容量のみを使用

.col-lg-6以下の例では、クラスのみを指定しています（.col-md-*および/または.col-sm-*）。これは、大型デバイスが50％/ 50％に分割されることを意味します。ただし、中型および小型のデバイスの場合、垂直方向にスタックします（幅100％）。

例

<div class="container-fluid">
<h1>Hello World!</h1>
<div class="row">
    <div class="col-lg-6" style="background-color:yellow;">
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-lg-6" style="background-color:pink;">
      <p>Sed ut perspiciatis...</p>
    </div>
</div>
</div>

❮ 前次 ❯

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