Bootstrap の col-lg-*、col-md-*、col-sm-* の違いは何ですか? 質問する

2020年に更新されました...

ブートストラップ5

Bootstrap 5 (アルファ)には新しいサイズがあります-xxl-:

col-*- 0 (xs)
col-sm-*- 576ピクセル
col-md-*- 768ピクセル
col-lg-*- 992ピクセル
col-xl-*- 1200ピクセル
col-xxl-*- 1400ピクセル

Bootstrap 5 グリッドデモ

ブートストラップ4

Bootstrap 4では新しい-xl-サイズがあります。このデモまた、-xs-中置詞が削除されたため、最小の列は単に、、col-1などになります。col-2col-12

col-*- 0 (xs)
col-sm-*- 576ピクセル
col-md-*- 768ピクセル
col-lg-*- 992ピクセル
col-xl-*- 1200ピクセル

Bootstrap 4 グリッドデモ

さらに、Bootstrap 4には新しい自動レイアウト列これらにもレスポンシブ ブレークポイント ( col、、など)col-smがありますcol-mdが、% 幅は定義されていません。そのため、自動レイアウト列は行全体で均等な幅で埋められます。

ブートストラップ3

Bootstrap 3グリッドには4 つの層 (または「ブレークポイント」) があります...

• 超小型（スマートフォン用.col-xs-*）
• 小（タブレット用.col-sm-*）
• 中（ノートパソコン用.col-md-*）
• ラージ（ノートパソコン/デスクトップ用.col-lg-*）。

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

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

col-sm-3一般的な小型デバイスの幅（> 768 ピクセル）では、12 列中 3 列の幅（25%）になります。

col-md-3一般的な中型デバイスの幅（> 992 ピクセル）では、12 列中 3 列の幅（25%）です。

小さい層 ( xs、smまたはmd) は、大きい画面幅のサイズも定義します。したがって、すべての層で同じサイズの列の場合は、最小のビューポートの幅を設定するだけです...

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

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

より大きな層が暗黙的に指定されます。異なるサイズを使用するより大きな層によって明示的に上書きされない限り、は を意味するためです。col-sm-33 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グリッドの仕組みについて