web-dev-qa-db-ja.com

Bootstrap 3 and .col-xs- * -12ユニットの行は必要ありませんか？

Bootstrap 3のドキュメント、つまり.col-xs-*クラスの使用法に少し混乱しています。

グリッドオプション のドキュメントには、すべてのグリッドシステムが12列を使用すると書かれています。

Bootstrap 3のドキュメント モバイルとデスクトップの例 レイアウトを見ると、最初の行の.col-xs-*クラスが合計18列単位で表示されています。

何が得られますか？どうすればいいの？ドキュメントは間違っていますか？

ありがとうございました

csstwitter-bootstrap-3grid-layout
10
user3290740

ブートストラップは12列の削除ですが、12列を超える行を配置できます。残りの列は、ビューポートに応じて、下の次の行に折り返されます。

この例では、「md」ビューポート（≥992px）では、コンテンツは合計12列（8 + 4）にまたがります。ただし、「xs」（<768px）では、コンテンツは18列にまたがり、1行（12列）になり、その下に半行（6列）があります。

<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

md.。

|    8   |  4 |

xs.。

|     12     |
|   6  |

編集：列が正しく折り返されないという問題が発生した場合は、ドキュメントの レスポンシブ列のリセット セクションを確認してください。

14
Schmalzy

グリッドレイアウトを、サイズごとに異なるグリッド、lg、md、sm、およびxs（またはブレークポイント特定の）同じマークアップを使用します。いくつかのブラウザインスタンスとグリッドレイアウトの例を壊して開くと役立つ場合があります。 このフィドル 、またはこのマークアップに従ってください：

<div class="row">
    <div class="col-xs-12 col-sm-6 col-lg-1">.col-xs-12 .col-sm-6 col-lg-1</div>
    <div class="col-xs-12 col-sm-6 col-lg-1">.col-xs-12 .col-md-6 col-lg-1</div>
    <div class="col-xs-12 col-sm-6 col-lg-1">.col-xs-12 .col-md-6 col-lg-1</div>
</div>

ビューポートの幅をピクセル単位で知る必要があるため、この情報をすぐに利用できるようにする ブラウザプラグイン を検討するか、コンソールを開いてこのスニペットを実行します。

Math.max（document.documentElement.clientWidth、window.innerWidth || 0）

1200ピクセルを超えるビューポートから開始：

col-lg

実際の列は、ブレークポイントのためにcol-lg-*クラスによって決定されます。これにより、そのブレークポイントのグリッドが作成されます。

次に、他の2つのブレークポイントcol-sm-*とcol-xs-*を見てください。

col-sm-*影響：

col-sm

col-xs-*影響：

col-xs

ブレークポイントを使用すると、サイズごとにまったく新しいグリッドを作成できます。したがって、理論的には、行は「厳密な」新しい行として機能しますが、colの数値は次のようになります。

<div class='col-xs-12'>col-xs-12</div>
<div class='col-xs-12'>col-xs-12</div>

can合計が12を超える場合、新しい行を強制します。これは、ブレークポイントごとに多数の異なるマークアップテンプレートを用意します。彼らはガイドです。

10
Carrie Kendall

列が占める行数は、クラスの最後の数です。

したがって、たとえば、次のクラスは次のとおりです。

.col-xs-12 .col-md-8  
.col-xs-6 .col-md-4

md-widthディスプレイでは1行になりますが、xs-widthディスプレイでは1.5行になります。
これは、小さなディスプレイでは、これらの要素が並べて表示されるのではなく、互いの上に表示されることを意味します。

0
Nit