web-dev-qa-db-ja.com

Bootstrap 3のグリッドクラス（col-sm-＃およびcol-lg-＃）を理解する

私はBootstrap 3を使い始めましたが、グリッドクラスの使用方法を理解するのに苦労しています。

これまでに私が理解したことは次のとおりです。

クラスcol-sm-#とcol-lg-#は、画面が特定のサイズ（それぞれ768pxと992px）を超える場合にのみ適用されるという点で、従来のcol-#と異なります。 -sm-または-lg-を省略すると、divが1つの列に縮小することはありません。

ただし、行内にcol-sm-6である2つのdivを作成すると、ウィンドウの幅が768pxから992pxの場合、それらはonly横に並んでいるように見えます。つまり、ウィンドウを完全に縮小してからゆっくりと拡大すると、レイアウトは1列、2列、そして1列に戻りますagain。

  1. これは意図した動作ですか？
  2. 768pxを超えるものに2つの列が必要な場合、bothクラスを適用する必要がありますか？ （<div class="col-sm-6 col-lg-6">）
  3. col-6alsoを含める必要がありますか？ <div class="col-6 col-sm-6 col-lg-6">
htmlcsscss3twitter-bootstraptwitter-bootstrap-3
85
emersonthis

[以下に更新]

ドキュメントをもう一度見てみると、これについて具体的に説明しているセクションを見落としているようです。

私の質問への答え：

  1. はい、それらは特定の幅を超えるすべてではなく、特定の範囲にのみ適用されることを意図しています。

  2. はい、クラスは結合されることを意図しています。

  3. Col-＃クラスは基本的にcol-xsm-＃または0pxを超える幅（すべての幅）と同等であるため、これは特定の場合には適切ですが、他の場合には適切ではないようです。

ドキュメントをあまりにも早く読む以外に、「[Bootstrap 2]メンタリティ」でBootstrap 3に入ったので混乱したと思います。具体的には、v2とv3で（オプションの）レスポンシブスタイル（bootstrap-responsive.css）を使用していました（より良いIMOのため）。

安定版リリースの更新：

この質問は、もともとRC1がリリースされたときに書かれたものです。彼らはRC2にいくつかの大きな変更を加えたので、今これを読んでいる人には、上記のすべてがまだ当てはまるわけではありません。

私が現在これを書いている時点で、col-*-#クラスは上向きに適用されるようです。たとえば、携帯電話では要素を12列（全角）、タブレット以上では2列（半ページ）にしたい場合は、次のようにします。

<div class="col-xs-12 col-sm-6"> ... //NO NEED FOR col-md-6 or col-lg-6

（この質問が書かれた後、追加のxsブレークポイントも追加されました。）

60
emersonthis

ここ Bootstrapの新しいグリッドクラスの使用方法を説明する非常に優れたチュートリアルがあります。

ミックスインなどもカバーします。

39
Srikanth

上記のSDPの答えを修正するために、col-xs-12でdeclare<div class="col-xs-12 col-sm-6">を宣言する必要はありません。 Bootstrap 3はモバイル優先であるため、すべてのdiv列はデフォルトで100％幅のdivと見なされます。つまり、「xs」サイズでは100％幅であり、常にデフォルトの動作になります。 sm, md, lgでの設定に関係なく。 xs列を100％にしたくない場合は、通常col-xs-(1-11)を実行します。

5
helloerik

理解するための最良の方法は、単純に上から下に考えることです（大規模なデスクトップから携帯電話まで）

まず、B3は最初にモバイルであるため、xsを使用する場合、列は大規模なデスクトップからxsまで同じになります（すべての画面サイズで必要なすべてを保持するため、xsまたはsmを使用することをお勧めします）

第二に、異なるデバイスまたは解像度の列に異なる幅を与えたい場合、複数のクラスを追加することができます、例えば

上記は、画面の解像度に応じて幅を変更します。各クラスの合計列= 12を保持していることに注意してください。

私の答えが役立つことを願っています！

4
Aslam

「768pxを超えるものに2つの列が必要な場合、両方のクラスを適用する必要がありますか？」

これは次のように単純でなければなりません：

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

col-lg-6も追加する必要はありません。

デモ： http://www.bootply.com/73119

4
Zim