web-dev-qa-db-ja.com

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

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

csstwitter-bootstraptwitter-bootstrap-3responsive-designbootstrap-4
491
StreetCoder

2019年更新...

Bootstrap 3グリッドは、4ティア（または「ブレークポイント」）に入っています...

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

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

したがって、Bootstrapの12列のグリッドでは...

col-sm-3は、典型的なsmallデバイス幅（> 768ピクセル）で12列のうち3列（25％）です

col-md-3は、典型的な媒体デバイス幅（> 992ピクセル）で12列のうち3列（25％）です。

小さいティア（xs、sm、またはmd）も、大きな画面幅のサイズを定義します。したがって、すべての層のsameサイズの列では、最小のビューポートの幅を設定するだけです...

<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-*クラスを使用する列は、垂直にnotスタックし、最小の画面で縮小し続けます。

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

ブートストラップ4

Bootstrap 4には、新しい-xl-サイズがあります。 このデモ を参照してください。また、-xs-インフィックスは削除されたため、最小の列はcol-1、col-2 .. col-12など。

col-*xs）
col-sm-*-576px
col-md-*-768px
col-lg-*-992px
col-xl-*-1200px

---（ブートストラップ4グリッドデモ

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

この記事では Bootstrapグリッドの詳細

491
Zim

ブートストラップ docs はそれを説明していますが、それを得るのにまだしばらく時間がかかりました。 2つの方法のうちの1つで自分自身にそれを説明するとき、それはより理にかなっています：

カラムが水平方向から始まると考える場合は、いつスタックしたいかを選択できます 。

たとえば、列から始めるとします。A B C

あなたはいつこれらを積み重ねてこのようにするべきかを決めます：

A

B

C

Col-lgを選択した場合、幅が1200px未満になると列が重なります。

Col-mdを選択した場合、幅が992px未満になると列が重なります。

Col-smを選択した場合、幅が768ピクセル未満のときに列は積み重なります。

Col-xsを選択した場合、列は積み重なりません。

一方で、縦に並んだ列を考えると、どの時点でそれらが水平になるかを選択できます

Col-smを選択した場合、幅が768px以上になると列は水平になります。

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

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

227
ryanman

Twitter Bootstrapのドキュメントから ：

  • 小グリッド（≧768ピクセル）= .col-sm-*、
  • 中グリッド（≥992px）= .col-md-*、
  • 大きなグリッド（≥1200px）= .col-lg-*。
56
Mathias Rechtzigel

私がこれを混乱させているのは、BootStrap 3がモバイル対応のシステムであり、これがBootstrapドキュメントのその部分のcol-xx-n階層にどのように影響するかを説明していないという事実だと思います。これにより、大きなデバイスに値を選択した場合は小さなデバイスで何が起こるのだろうか、また複数の値を指定する必要があるのか​​どうか疑問に思います。 （あなたはしません）

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

これが実際に意味することは、あなたが列をcol-xs-nにするならば、ウィンドウが非常に制限されてページが正しく表示され得ないサイズに落ちるまで、それらは非常に小さなスクリーンでさえ正しい見た目を保持するということです。これは、768px以下の幅のデバイスでは、テーブルが劣化した状態（シングルまたは折り返された列の形式）ではなく、設計したとおりに表示されることを意味します。明らかにこれはまだ列の内容に依存しており、それが重要なポイントです。ページが小さい画面に並んで大きなデータの複数の列を表示しようとすると、列を考慮しないと、列は自然に恐ろしい方法で折り返されます。したがって、列内のデータに応じて、コンテンツを適切に表示するためにレイアウトを変更するポイントを決めることができます。

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

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

Col-lg-nを選択した場合、画面幅がxpしきい値の1200pxを下回るまで列は正しく表示されます。

24
David Bridge

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

  • 超小型デバイス電話（<768px） - .col-xs-
  • 小型デバイス錠（≧768ピクセル） - .col-sm-
  • 中型デバイスデスクトップ（≥992px） - .col-md-
  • 大型デバイスデスクトップ（≥1200px） - .col-lg-

グリッドオプション：

Bootstarp Grid System

参照： グリッドシステム

8
Ani Menon
.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
5
Varun Jain

TL; DR

.col-X-Yは スクリーンサイズXからup 、 Y列を埋めるためにこの要素を伸ばします 。

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

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

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

例 

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

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

4
Alex R

1つの特定のケース：ブートストラップグリッドシステムを学ぶ前に、ブラウザのズームが100％（100％）に設定されていることを確認してください。例：画面の解像度が（1600ピクセルx 900ピクセル）でブラウザのズームが175％の場合、 "bootstrap-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パーセント - 積み上げ要素

1
Ted

画面サイズに応じて、1行にいくつの列を配置するかをブートストラップに指示するためによく使用されます。

col-xs-2

smが小さい画面を定義するのと同じ方法で、md（中サイズ）、lg（大サイズ）と同じように、1行に2列しか表示されません。

xs-col-2 md-col-4

xsからsmまでの画面サイズ（含まれている）から2つの列がすべての行に表示されます。クロムの開発者モード（ctr + shift + i）でいろいろなピクセルやデバイスを試してみてください

0
Nemo Holmes