85

Bootstrap 3 を使い始めましたが、グリッド クラスの使用方法を理解するのに苦労しています。

これが私がこれまでに理解したものです：

クラスcol-sm-#とは、画面が特定のサイズ (それぞれ 768px と 992px) を超える場合にのみ適用されるという点でcol-lg-#、単純な古いものとは異なるようです。col-#-sm- または -lg- を省略した場合、div は 1 つの列に折りたたまれません。

ただし、行内に 2 つの div を作成すると、ウィンドウの幅が 768px から 992px の場合にのみcol-sm-6、横に並んでいるように見えます。つまり、ウィンドウを完全に縮小してからゆっくりと広げると、レイアウトは 1 列になり、次に 2 列になり、再び1 列に戻ります。

  1. これは意図した動作ですか？
  2. 768px を超えるものに対して 2 つの列が必要な場合、両方のクラスを適用する必要がありますか? ( <div class="col-sm-6 col-lg-6">)
  3. col-6 また、含まれるべきですか？<div class="col-6 col-sm-6 col-lg-6">
4

6 に答える 6

39

ここには、Bootstrap 3 で新しいグリッド クラスを使用する方法を説明する非常に優れたチュートリアルがあります。

mixinなどにも対応しています。

于 2013-09-19T01:09:14.563 に答える
5

理解する最善の方法は、単純に上から下 (大型デスクトップから携帯電話) に考えることです。

まず、B3 はモバイル ファーストであるため、xs を使用すると、列は大型デスクトップから xs まで同じになります (xs または sm を使用することをお勧めします。これにより、すべての画面サイズですべてを希望どおりに保つことができます)。

次に、異なるデバイスまたは解像度で列に異なる幅を与えたい場合は、複数のクラスを追加できます。

上記は画面の解像度に応じて幅を変更します。覚えておいてください。各クラスの合計列数は 12 のままです。

私の答えが役に立てば幸いです！

于 2013-11-03T08:47:32.103 に答える