web-dev-qa-db-ja.com

ブートストラップの「col-md-4」、「col-xs-1」、「col-lg-2」の数字の意味

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

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

（*は何らかの数を表す）.

誰でも次のことを説明してください。

  1. How その数はグリッドを揃えていますか？
  2. どのように これらの数字を使うには？
  3. 何 彼らは実際に表しますか？
csstwitter-bootstraptwitter-bootstrap-3grid
381
Bravo

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

文字を無視する（xs、sm、md、lg）今のところ 、数字だけで始めます...

  • 数字（1〜12）は、divの合計幅の一部を表します
  • すべてのdivは12列に分割されています
  • そのため、col-*-6は6列の12列（幅の半分）、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未満でもかまいませんが、問題のある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クラスとネストされていないcolクラスの間にコンテンツが並べられます。

-あなたはxs, sm, md, lgの使用法について具体的に尋ねなかったが、それらは手をつないで行くので、私はそれに触れずにはいられない...

要するに、それらはクラスが適用される画面サイズを定義するために使用されます：

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

詳細については、公式のBootstrapドキュメントの "Grid Options" の章を読んでください。

通常、複数の列クラスを使用してdivを分類し、画面サイズに応じて異なる動作をする必要があります（これがbootstrapの応答性の中心です）例：クラスcol-xs-6およびcol-sm-4を持つdivは、携帯電話では画面の半分（xs）、タブレットでは画面の1/3に広がります（sm）。

<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はxsおよびsmの6列、および4列にまたがります。 mdおよびlg、ただしsmおよびlgは明示的に宣言されていませんが）

注：xsを定義しない場合、デフォルトはcol-xs-12になります（つまり、col-sm-6は半分です） sm、md、およびlg画面上の幅、ただしxs画面上の全幅）。

注：.rowに12を超える列が含まれている場合、それらがどのように反応するかを知っている限り、実際にはまったく問題ありません。 -これは論争の的になる問題であり、全員が同意するわけではありません。

783
Shawn Taylor

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

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

Tip：各クラスはスケールアップするため、xsとsmに同じ幅を設定する場合は、xsを指定するだけです。

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

col-lg-は列の大きい≥ 1200pxを表します
col-md-列媒体≥ 992pxを表します
col-xs-は列余分な小さい≥ 768pxを表します

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

また、グリッドシステムの動作を示すために以下の画像を作成しました。この例では、col-lg-6のように3で使用して、グリッドシステムがページでどのように動作するかを示し、lgを確認します。 mdおよびxsは、ウィンドウサイズに応答します。

Bootstrap grid system, col-*-6

39
Alireza

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

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

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

デスクトップ画面に2列、電話画面に1列だけ（つまり2行が重なっている）にしたい場合は、two col-md-6と2つのcol-xs-12を列に入れます。互いの関係、または単にxsスタイルを省略します。

9
Tone Škoda

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

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

続きを読む...

8
Aditya P Bhatt

どうぞ

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

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

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

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

screen size definitions

1
Dhananjay