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

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

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

しかし、大型デバイスのデザインは 33％/66％ の分割の方が良いかもしれません。

チップ: 大型デバイスとは、画面の幅が 1200 ピクセル以上のものと定義されています。

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

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

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

下の例では、小型デバイスは 25%/75% に、中型デバイスは 50%/50% に、 大型デバイスは 33%/66% に分割されます：

大型のみを使用する

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