0

私はまだ Bootstrap を学び始めたばかりで、グリッド システムに戸惑っています。グリッドシステムの説明によると

Bootstrap には、デバイスまたはビューポートのサイズが大きくなるにつれて、最大12 列まで適切にスケーリングする、レスポンシブでモバイルの最初の流体グリッド システムが含まれています。

しかし、次の例では、どうしてこのように示されているのでしょうか?

<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>

xs が極小デバイスで md が中型デバイスであることはわかっていますが、xs のクラスが「col-xs-12」と「col-xs-6」であるのはなぜですか? つまり、Bootstrap Grid System の定義とは対照的に、最大 18 列を追加できるようになりました。誰かがこれについて私に教えてもらえますか?

4

2 に答える 2

1

あなたはそれを間違っています。超小型デバイスでは、最初のデバイスがdiv行全体を埋め、2 つ目のデバイスはその下に配置され、クラスhalfのために行のみを含みます。col-xs-12ブートストラップ グリッド システムの整数の合計が 12 より大きい場合、グリッド システムを 18 より大きくしている列は次の行に配置されます。

コードで説明:

<div class="row">
    <div class="col-xs-4"></div>
    <div class="col-xs-8"></div>
</div>

この場合、と には 12 列しか含まれない.col-xsため、2 つの要素はくっつきます。4+8 = 12.row

<div class="row">
    <div class="col-xs-5"></div>
    <div class="col-xs-8"></div>
</div>

これで、.col-xs-5列は最初の行になり、.col-xs-82 番目の行に入ります。

詳細については、以下の画像を参照してください。

ここに画像の説明を入力

于 2016-01-10T14:47:07.230 に答える
0

xs と md は固定サイズを設定するため、lg(大画面)では col-xs-12 col-xs-6 を使用でき、そのサイズとして設定されます。したがって、これは間違っています:「Bootstrap Grid System の定義とは対照的に、最大 18 列を追加するようになりました。」

これを試して：

<div class="row">
    <div class="col-lg-12 col-md-8">.col-xs-12 .col-md-8</div>
    <div class="col-lg-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
于 2016-01-10T14:47:30.057 に答える