[解決済み] Bootstrap の "col-md-4", "col-xs-1", "col-lg-2" に含まれる数字の意味

質問

新しいBootstrapのグリッドシステム、特にこれらのクラスで混乱しています。

col-lg-*
col-md-*
col-xs-*

(ここで * は何らかの数字を表します)。

どなたか、次のことを説明してください。

1. どのように という数字がグリッドを揃えているのですか？
2. どのように この数字をどう使うか？
3. 何 を表現しているのでしょうか？

どのように解決するのか？

Bootstrap 3のみに適用されます。

文字を無視する（x s , sm , md , lg ) とりあえず , まずは数字だけ...。

• 数字 (1-12) は、任意の div の全幅の一部を表します。
• すべてのdivは12列に分割されます
• ということで col-*-6 は、12列のうち6列（幅の半分）にまたがっています。 col-*-12 は12列中12列（全幅）にわたっている、など

ですから、もしあなたが 2つの同じ列 をdivにまたがるように記述します。

<div class="col-xs-6">Column 1</div>
<div class="col-xs-6">Column 2</div>

または、必要な場合は 3つの不等間隔の列 をその同じ幅にまたがるように書くことができます。

<div class="col-xs-2">Column 1</div>
<div class="col-xs-6">Column 2</div>
<div class="col-xs-4">Column 3</div>

列の数は常に12になることにお気づきでしょう。12 より少なくすることもできますが、12 より多くすると、問題のある div は次の行に移動してしまうので注意してください ( .row これは全く別の話です）。

また、以下のことも可能です。 カラムの中にカラムをネストさせる を使用するのが最適です。 .row のようなラッパーで囲まれている)。

<div class="col-xs-6">
  <div class="row">
    <div class="col-xs-4">Column 1-a</div>
    <div class="col-xs-8">Column 1-b</div>
  </div>
</div>
<div class="col-xs-6">
  <div class="row">
    <div class="col-xs-2">Column 2-a</div>
    <div class="col-xs-10">Column 2-b</div>
  </div>
</div>

また、ネストしたdivの各セットは、親divの最大12カラムにまたがる。 注意 各 .col クラスは左右に15pxのパディングを持つので、通常、ネストした列は .row で、マージンが-15pxになります。これにより、パディングの重複を避け、入れ子と入れ子でないcolクラスの間でコンテンツの並びを保つことができます。

-- 特にご質問はありませんでしたが xs, sm, md, lg の使い方ですが、両者は密接に関係しているので、触れないわけにはいきませんね...。

要するに、どのタイミングで 画面サイズ クラスが適用されます。

• xs = 超小型画面 (携帯電話)
• sm = スモールスクリーン (タブレット)
• md = ミディアムスクリーン (一部のデスクトップ)
• lg = 大型スクリーン (残りのデスクトップ)

を読む " グリッド オプション " の章をご覧ください。詳細については、Bootstrapの公式ドキュメントをご覧ください。

あなたは 通常 複数のカラムクラスを使って div を分類し、画面サイズに応じて異なる動作をするようにします (これは bootstrap のレスポンシブ対応の核心部分です)。 col-xs-6 と col-sm-4 は、携帯電話(xs)では画面の半分、タブレット(sm)では画面の1/3の大きさになります。

<div class="col-xs-6 col-sm-4">Column 1</div> <!-- 1/2 width on mobile, 1/3 screen on tablet) -->
<div class="col-xs-6 col-sm-8">Column 2</div> <!-- 1/2 width on mobile, 2/3 width on tablet -->

NOTE 以下のコメントのように、あるスクリーンサイズのグリッドクラスは、そのスクリーンサイズに適用されます。 より大きい 他の宣言で上書きされない限り（例えば col-xs-6 col-md-4 は6カラムにまたがる xs と sm に4カラム、そして md と lg にもかかわらず sm と lg は明示的に宣言されていない)

NOTE を定義していない場合は xs に設定されます。 col-xs-12 (すなわち col-sm-6 は半分の幅で sm , md と lg 画面では全角ですが xs 画面)になります。

NOTE を使用しても全く問題ありません。 .row が 12 個以上の col を含む場合、それらがどのように反応するかを認識している限り、12 個以上の col を含みます。--これは議論のある問題で、誰もが賛成しているわけではありません。