Bootstrap グリッド - 中型デバイス

Bootstrap グリッドの例：中型デバイス

前の章では、小型デバイス用のクラスを持つグリッドの例を示しました。 その中で、2 つの div（カラム）を使用し、それぞれ 25%/75% の分割を指定しました：

しかし、中型デバイスでは、デザインを 50%/50% に分割した方が良い場合があります。

チップ: 中型デバイスとは、画面の幅が 992 ピクセル ～ 1199 ピクセルのものと定義されています。

中型デバイスには、.col-md-* クラスを使用します。

いま、中型デバイスにカラム幅を追加します：

今、Bootstrap は「小型は、-sm- を持つクラスを見てそれを使用し、中型は、-md- を持つクラスを見てそれを使用する。」 と、言おうとしています。

下の例は、小型デバイスでは 25%/75% に分割され、中型（および大型）デバイスでは 50%/50% に分割され、 極小型では、自動的にスタック（100%）されます：

中型のみを使用する

下の例では、.col-sm-* なしに .col-md-6 のみを指定しています。 これは、クラスは小さい方に調整されるので、中型と大型では 50%/50% に分割されることを意味しています。 しかし、小型デバイスでは、縦にスタック（100% 幅）されることになります：

次の章では、大型デバイスへ別の分割パーセントを追加する方法を示します。