[解決済み] Bootstrapのcol-lg-*、col-md-*、col-sm-*の違いは何ですか？

質問

とはどのような違いがあるのでしょうか？ col-lg-* , col-md-* と col-sm-* Twitter Bootstrapで？

解決方法は？

2020年のアップデート...

ブートストラップ5

で ブートストラップ5 (アルファ) には、新しい -xxl- のサイズを指定します。

col-* - 0 （xs）
col-sm-* - 576px
col-md-* - 768px
col-lg-* - 992px
col-xl-* - 1200px
col-xxl-* - 1400px

Bootstrap 5 Grid デモ

ブートストラップ4

で ブートストラップ4 は、新しい -xl- サイズをご覧ください。 このデモ . また -xs- が削除されました。 であるため、最小のカラムは単純に col-1 , col-2 .. col-12 など。

col-* - 0 (xs)
col-sm-* - 576px
col-md-* - 768px
col-lg-* - 992px
col-xl-* - 1200px

Bootstrap 4 Grid デモ

さらに、Bootstrap 4 には、新しい オートレイアウトカラム . これらはまた、レスポンシブブレークポイント( col , col-sm , col-md など）、しかし、定義された%幅を持ちません。したがって、自動レイアウトのカラムは 等幅 行をまたぐ。

ブートストラップ3

は ブートストラップ3 グリッドが入る 4 層(またはブレイクポイント)・・・。

• 超小型（スマートフォン向け .col-xs-* )
• 小型（タブレット端末用 .col-sm-* )
• 中型（ノートパソコン用 .col-md-* )
• 大型（ノートパソコン/デスクトップ用 .col-lg-* ).

これらのグリッドサイズにより、異なる幅でのグリッドの挙動を制御することができます。異なる階層を制御するのは、CSS メディアクエリ .

つまり、Bootstrapの12列グリッドでは...

col-sm-3 は12列のうち3列の幅（25%）で、一般的な 小さい デバイスの幅(> 768ピクセル)

col-md-3 は12列のうち3列の幅（25%）で、一般的な ミディアム デバイスの幅 (> 992 ピクセル)

小さい方の層( xs , sm または md ) は、より大きな画面幅に対応するサイズも定義しています。 . そのため 同じく のサイズのカラムを全階層に配置する場合は、最小のビューポートに対応する幅を設定すればよい...。

<div class="col-lg-3 col-md-3 col-sm-3">..</div> と同じです。

<div class="col-sm-3">..</div>

より大きな階層は を暗示している。 なぜなら col-sm-3 というのは 3 units on sm-and-up ただし、異なるサイズを使用する大きな階層によって特に上書きされない限り、である。

xs (デフォルト) > で上書きされます。 sm で上書きされます。 md で上書きされます。 lg

組み合わせる の列幅を変更するために使用するクラスです。 異なる グリッドサイズ . これにより、レスポンシブなレイアウトが実現します。

<div class="col-md-3 col-sm-6">..</div>

は sm , md と lg グリッドは、768ピクセル未満のスクリーン/ビューポートでは、すべて縦にスタックします。このため xs グリッドが適合します。このため col-xs-* クラスは ない は垂直方向に積み重なり、最小の画面では縮小され続けます。

ブラウザのサイズを変更する このデモを使用して をクリックすると、グリッドのスケーリング効果を見ることができます。

この記事で解説しているのは Bootstrapのグリッドがどのように