Bootstrapのcol-lg-*、col-md-*、col-sm- *の違いは何ですか？

違いは何ですかcol-lg-*、col-md-*そしてcol-sm-*Twitterのブートストラップでは？

2019年に更新...

ブートストラップ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-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-*クラスを使用する列は垂直に積み重ねられず、最小の画面で縮小され続けます。

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

ブートストラップ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グリッドのデモ

さらに、Bootstrap 4には新しい自動レイアウト列が含まれています。これらはまた、応答性のブレークポイントを持っている（col、col-sm、col-md、等。）が、％の幅を定義していません。したがって、自動レイアウト列は行全体で同じ幅になります。

この記事では、Bootstrapグリッドについて詳しく説明します

ブートストラップのドキュメントはそれを説明していますが、それを得るのにまだしばらく時間がかかりました。次の2つの方法のいずれかで説明すると、より理にかなっています。

列が水平方向から始まると考える場合は、いつ積み上げるかを選択できます。

たとえば、列から始める場合：ABC

いつスタックするかを次のように決定します。

あ

B

C

col-lgを選択すると、幅が1200px未満のときに列がスタックされます。

col-mdを選択すると、幅が992px未満のときに列がスタックします。

col-smを選択すると、幅が768px未満のときに列がスタックします。

col-xsを選択すると、列がスタックすることはありません。

一方、積み上げて開始する列について考える場合は、列が水平になる点を選択できます。

col-smを選択すると、幅が768px以上になると列が水平になります。

col-mdを選択すると、幅が992px以上の場合、列は水平になります。

col-lgを選択すると、幅が1200px以上の場合、列は水平になります。

Twitter Bootstrapドキュメントから：

• 小さなグリッド（≥768px）= .col-sm-*、
• 中グリッド（≥992px）= .col-md-*、
• 大きなグリッド（≥1200px）= .col-lg-*。

これの紛らわしい側面は、BootStrap 3がモバイルファーストレスポンシブシステムであり、これがBootstrapドキュメントのその部分のcol-xx-n階層にどのように影響するか説明できないことにあると思います。これにより、大きなデバイスの値を選択した場合、小さなデバイスで何が起こるのか不思議に思われ、複数の値を指定する必要があるのか​​どうか不思議になります。（あなたはしません）

これを明確にしようとすると、次のように述べます。低い粒度のタイプ（xs、sm）は小さい画面でレイアウトの外観を保持し、大きいタイプ（md、lg）は大きい画面でのみ正しく表示されますが、小さいデバイスでは列を折り返します。前の例で引用した値は、使用可能な画面領域に合うようにブートストラップが外観を低下させるしきい値を示しています。

これが実際に意味することは、列をcol-xs-nにすると、ウィンドウが非常に制限されたサイズになり、ページが正しく表示されなくなるまで、非常に小さな画面でも正しい外観を維持します。つまり、幅が768px以下のデバイスでは、劣化した状態（単一または折り返された列の形式）ではなく、設計どおりにテーブルが表示されます。明らかに、これはまだ列の内容に依存しており、それが全体のポイントです。ページが大きなデータの複数の列を小さな画面に並べて表示しようとすると、列を考慮に入れないと、列が自然にひどく折り返されます。したがって、列内のデータに応じて、コンテンツを適切に表示するためにレイアウトを犠牲にするポイントを決定できます。

たとえば、ページに3つのcol-sm-n列が含まれている場合、ページ幅が992pxを下回ると、ブートストラップによって列が行に折り返されます。つまり、データは引き続き表示されますが、表示するには垂直スクロールが必要になります。レイアウトを劣化させたくない場合は、xsを選択します（データが3列の低解像度デバイスで適切に表示できる限り）。

データの水平位置が重要な場合は、視覚的な性質を維持するために、より低い粒度の値を選択する必要があります。位置はそれほど重要ではありませんが、ページがすべてのデバイスで表示される必要がある場合は、より高い値を使用する必要があります。

col-lg-nを選択すると、画面の幅がxsしきい値の1200pxを下回るまで、列が正しく表示されます。

デバイスサイズとクラスプレフィックス：

• 非常に小さいデバイス電話（<768px）- .col-xs-
• 小型デバイスタブレット（≥768px）- .col-sm-
• 中型デバイスデスクトップ（≥992px）- .col-md-
• 大型デバイスデスクトップ（≥1200px）- .col-lg-

グリッドオプション：

参考：グリッドシステム

TL; DR

.col-X-Y手段の画面サイズのXとアップ時には、Yの列を埋めるために、この要素を伸ばします。

ブートストラップはあたり12列のグリッドを提供する.rowため、Y = 3はwidth = 25％を意味します。

xs, sm, md, lg それぞれスマートフォン、タブレット、ラップトップ、デスクトップのサイズです。

異なる画面サイズで異なる幅を指定するポイントは、小さい画面でサイズを大きくできるようにすることです。

例

<div class="col-lg-6 col-xs-12">

意味：デスクトップでは幅50％、モバイル、タブレット、ラップトップでは幅100％。

.col-xs-$   Extra Small     Phones Less than 768px 
.col-sm-$   Small Devices   Tablets 768px and Up 
.col-md-$   Medium Devices  Desktops 992px and Up 
.col-lg-$   Large Devices   Large Desktops 1200px and Up 

特定のケース：ブートストラップグリッドシステムを学習する前に、ブラウザのズームが100％（100％）に設定されていることを確認してください。例：画面解像度が（1600px x 900px）で、ブラウザのズームが175％の場合、「ブートストラップped」要素が積み重ねられます。

HTML

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-4">class="col-lg-4"</div>
        <div class="col-lg-4">class="col-lg-4"</div>
    </div>
</div>

Chromeズーム100％

ブラウザ100％-要素は水平に配置されます

Chromeズーム175％

ブラウザー175％-積み上げ要素

複雑なブートストラップを解除しましょう！

どのように注意してくださいCOL-SMは、以下の（新しい行に他の用語の休憩中に）100％の幅を占めている576pxが、COLはありません。現在の幅がgifの上部中央にあることがわかります。

これがコードです：

<div class="container">
    <div class="row">
        <div class="col">col</div>
        <div class="col">col</div>
        <div class="col">col</div>
    </div>
    <div class="row">
        <div class="col-sm">col-sm</div>
        <div class="col-sm">col-sm</div>
        <div class="col-sm">col-sm</div>
    </div>
</div>

デフォルトでは、ブートストラップは、すべての列（col）を同じ幅で単一の行に配置します。この場合、3col、画面サイズに関係なく、3つがそれぞれ100％/ 3の幅を占有します。あなたはそれをgifで見ることができます。

行ごとに1つの列のみをレンダリングする場合、つまり各列に100％の幅を与えたいが、画面が小さい場合はどうなるでしょうか。今col-xxクラスが来ます！

col-sm列を576px未満の別々の行に分割したかったので使用しました。これら4col-xxクラスは、モバイル、タブレット、ラップトップ、大型モニターなどのさまざまなディスプレイデバイス用にBootstrapによって提供されます。

したがって、col-sm576pxを下回り、768pxを下回り、col-md992pxを下回り、col-lg1200pxをcol-xl下回ります。

col-xsブートストラップ4にはクラスがないことに注意してください。

これはかなり要約です。仕事に戻ることができます。

しかし、それだけではありません。幅がカスタマイズできるようにcol-*なりcol-xx-*ました。

私はそれを上述の例では覚えているcolか、col-xx一列に等しい幅を要します。特定の幅を広げたい場合は、colこれを行うことができます。

ブートストラップ行は12の部分に分かれているため、上記の例では3つありました。 colあったため、それぞれが12/3 = 4の部分を占めます。これらのパーツを幅を測定する方法と見なすことができます。

我々はまた、フォーマットであることを書くことができcol-*、すなわちcol-4、このように：

<div class="row">
  <div class="col-4">col</div>
  <div class="col-4">col</div>
  <div class="col-4">col</div>
</div>

そして、デフォルトでブートストラップは等しい幅を与えるので、それは違いを生じませんでした col（4 + 4 + 4 = 12）に。

しかし、7パートを1にcol、3パートを2にcol、残りを2パート（12-7-3 = 2）から3にcol（7 + 3 + 2合計12）したい場合は、次のように簡単にできます。

<div class="row">
  <div class="col-7">col-7</div>
  <div class="col-3">col-3</div>
  <div class="col-2">col-2</div>
</div>

col-xx-*クラスの幅もカスタマイズできます。

<div class="row">
    <div class="col-sm-7">col-sm-7</div>
    <div class="col-sm-3">col-sm-3</div>
    <div class="col-sm-2">col-sm-2</div>
</div>

アクションではどのように見えますか？

合計がcol12を超えるとどうなりますか？次に、colシフト/下の線に調整します。はい、行には任意の数の列があります。

<div class="row">
        <div class="col-12">col-12</div>
        <div class="col-9">col-9</div>
        <div class="col-6">col-6</div>
        <div class="col-6">col-6</div>
    </div>

大画面の場合は3列を1行にしたいが、小画面の場合はこれらの列を2行に分割するとどうなるでしょうか。

<div class="row">
    <div class="col-12 col-sm">col-12 col-sm TOP</div>
    <div class="col col-sm">col col-sm</div>
    <div class="col col-sm">col col-sm</div>
</div>

ここで遊ぶことができます：https : //jsfiddle.net/JerryGoyal/6vqno0Lm/

このイメージは、概念をよりよく理解するのにかなり良いと思います！

詳細については、以下のリンクをご覧ください。

https://getbootstrap.com/docs/3.4/css/

画面サイズに応じて、行に何列配置するかをブートストラップに指示するために使用されます-

col-xs-2

smが小画面md（中サイズ）、lg（大サイズ）を定義するのと同じように、余分なsmall（xs）画面の行に2列のみを表示しますが、ブートストラップの小さい最初のルールによれば、

xs-col-2 md-col-4

次に、xsからsm（included）までの画面サイズの2行が各行に表示され、次のサイズになると変更されます。つまり、mdからlg（included）までの画面サイズは、画面サイズの理解を深めるために、さまざまな画面モードで実行してみてください。クロムの開発者モード（ctr + shift + i）で、さまざまなピクセルまたはデバイスを試してください