ブートストラップの Col-SM Col-MD の違い

ブートストラップフェンスシステムCSSにおけるcol-xs-*、col-sm-*、col-md-*の意味は、表示画面の幅に応じて対応するクラススタイルを自動的に選択することです。

.col-xs- 超小型画面携帯電話 (<768px) (推奨学習: Bootstrap ビデオ チュートリアル )

.col-sm- 小型画面タブレット (≥768px)

.col-md- 中画面デスクトップ モニター (≥992px)

#.col-lg- 大画面大型デスクトップモニター (≥1200px)

まず、

1、col- について説明します。 column;

2. xs-maxsmall、extra small; sm-small、small; md-medium、medium; lg-large、large;

3. -* は列を占有することを意味します。は、各行 12 列グリッド システム比率を自動的に占有します;

4、col-xs-*超小型画面携帯電話 (<768px)、

.col-sm -*小型画面タブレット (≥768px),

.col-md-*中画面デスクトップ モニター (≥992px) (グリッド パラメーター).

5. この画面のどこにいても、グリッド システムは各行を 12 列に自動的に分割します。col-xs-*、col-sm-*、col-md-* に続くパラメータは、それぞれが占める列の数を表します。現在の画面の div 。

例:

画面上のこの div の位置は次のとおりです: .col-xs-6 は、ウルトラ- small screen 画面の半分 (12/6 列 = 2 div) であり、.col-md-3 はミッドレーン画面の 3 列または 1/4 (12/3 列 = 4 div) を占めます。

6. 逆に、小さい画面に 3 つの div を並べて表示したい場合 (12/3 = それぞれ 4 列を占有)、col-xs-4; 大きい画面の div に 6 を表示します ( 12/6 = それぞれ 2 列を占めます)、次に、col-md-2; このようにして、必要なレイアウトを制御できます。

Bootstrap に関連する技術的な記事については、

Bootstrap チュートリアル 列にアクセスして学習してください。

以上がブートストラップの Col-SM Col-MD の違いの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。