ブートストラップの「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-*-612列のうち6列（幅の半分）、col-*-1212列のうち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別の話です）。

以下のように、columns内に列をネストすることもできます（.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クラスとネストされていないcolクラスとの間でコンテンツの整列が維持されます。

- xs, sm, md, lg使い方について具体的に尋ねたわけではありませんが、密接に関係しているので、触れざるを得ません...

つまり、これらはクラスが適用される画面サイズを定義するために使用されます。

• xs = 非常に小さい画面（携帯電話）
• sm = 小さな画面（タブレット）
• md = 中画面（一部のデスクトップ）
• lg = 大画面（残りのデスクトップ）

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

あなたはする必要があり、通常はそれが（これは、ブートストラップが応答するものの心臓部である）、画面サイズに応じて異なる動作をしますので、複数の列クラスを使用してdiv要素を分類します。例えば：クラスを持つdiv要素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 -->

注：以下のコメントどおり、特定の画面サイズのためのグリッド・クラスは、その画面サイズに適用し、より大きなそれ別の宣言を上書きしない限り（すなわちcol-xs-6 col-md-4スパン6つの列xs とsm、4列にmd してlg、にもかかわらず、smおよびlg明示的に宣言されませんでした）

注：を定義しない場合xs、デフォルトでになりますcol-xs-12（つまり、と画面でcol-sm-6は幅の半分ですが、画面では全幅です）。smmdlgxs

注：実際に.row12列を超える列が含まれていても、それらがどのように反応するかを認識している限り、まったく問題ありません。-これは論争の問題であり、誰もが同意するわけではありません。

ブートストラップグリッドシステムには4つのクラスがあります
。xs（電話用）
sm（タブレット用）
md（デスクトップ用）
lg（大きなデスクトップ用）

上記のクラスを組み合わせて、より動的で柔軟なレイアウトを作成できます。

ヒント：各クラスは拡大するため、xsとsmに同じ幅を設定する場合は、xsを指定するだけで済みます。

はい、答えは簡単ですが、次を読んでください：

col-lg-はカラムラージを表します≥ 1200px
col-md-はカラムメディウムを表します≥ 992px
col-xs-カラムはエクストラスモールを表します≥ 768px

ピクセル番号はブレークポイントであるため、たとえばcol-xs、ウィンドウが768px未満の場合に要素をターゲットにします（モバイルデバイスの可能性があります）...

グリッドシステムがどのように機能するかを示すために、以下の画像も作成しました。この例ではcol-lg-6、グリッドシステムがページでどのように機能するかを示しlg、mdを見て、xsウィンドウサイズに応じて、次のとおりです。

主なポイントはこれです：

col-lg-* col-md-* col-xs-* col-sm これらの異なる画面サイズにある列の数を定義します。

例：デスクトップ画面と電話画面に2つの列が必要な場合は、列にcol-md-62つと2つのcol-xs-6クラスを配置します。

デスクトップ画面に2列、電話画面に1列のみ（つまり、2つの行を互いに積み重ねて表示）にしたい場合、列にtwo col-md-62つを配置col-xs-12します。合計が24になるため、それらはそれぞれの上に自動的に積み上げられます。その他、またはxsスタイルを省略します。

Twitter Bootstrapドキュメントから：

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

続きを読む...

どうぞ

col-lg-2：画面が大きい場合（lg）、このコンポーネントは2のスペースを取ります。 行全体が12要素に収まることを考慮して要素のます（大画面では、このコンポーネントは行の16％のスペースを取ることがわかります）

col-lg-6：画面が大きい場合（lg）、このコンポーネントは6のスペースを取ります。 行全体が12要素に収まることを考慮して要素のます。適用すると、コンポーネントが行の利用可能なスペースの半分を占めていることがわかります。

上記のルールは、画面が大きい場合にのみ適用されます。画面が小さい場合、このルールは破棄され、行ごとに1つのコンポーネントのみが表示されます。

以下の画像は、さまざまな画面サイズの幅を示しています。