新しい Bootstrap three documentationでは、極小デバイスの場合、グリッドの動作が「常に水平」であると説明されています。これは何を意味するのでしょうか？確かに小さなデバイスでは、すべての列が互いに垂直に積み重ねられるでしょうか? ここで私が失敗しているのは、グリッドとは何かについての私の (欠如した) 理解です。
私はデザイナー以外の視点から来ており、多くの製品をレスポンシブグリッドに反復しようとしています. 各行内の列の数は、奇数または偶数の製品が表示されているかによって異なります。<-- Bootstrap などは、静的コンテンツが動的ページにあるとシンプルに見えます。たとえば、<div class="col-xs*"></div>12 にするために空を挿入する必要がありますか?
「常に水平」とは、col-xs-* がフローティングからスタックに変わるブレークポイントがないことを意味します。例えば：
<div class="col-xs-6"></div>
<div class="col-xs-6"></div>
この例では、携帯電話、タブレット、デスクトップのいずれを使用していても、同じサイズの 2 つの列が常に存在します。対照的に：
<div class="col-sm-6"></div>
<div class="col-sm-6"></div>
この例では、デバイスのビューポートが >=768 になるまで列が積み重ねられ、768 になると同じサイズの 2 つの列に切り替わります。
あなたが自問するかもしれない質問は、「なぜこれらすべてのバリエーションがあるのですか?」ということです。これらのオプションが提供するのは、CSS で手を汚すことなく、さまざまなデバイスでレイアウトをカスタマイズできることです。たとえば、電話では 2 つの等しい列が必要で、タブレット以上では 75/25 の分割が必要な場合は、次のようにします。
<div class="col-xs-6 col-sm-8"></div>
<div class="col-xs-6 col-sm-4"></div>
電話ではスタック、タブレットでは均等、デスクトップでは 75/25 が必要な場合は、次のようにします。
<div class="col-sm-6 col-md-8"></div>
<div class="col-sm-6 col-md-4"></div>
電話のグリッドを明示的に指定していないため、積み上げに戻ります。
堅実な感じを得るには、いくつかの単純なグリッドを組み合わせてから、ブラウザーのサイズ変更を開始します。ドキュメント自体よりもはるかに簡単に変更方法を確認できるはずです。
編集
興味深いと思われるもう 1 つの例を考えてみましょう。電話とタブレットの両方で 2 つの等しい列があり、次に 75/25 とデスクトップです。コード：
<div class="col-xs-6 col-md-8"></div>
<div class="col-xs-6 col-md-4"></div>
これは実際、「常に水平」の優れた例です。col-sm を指定していないため、>=992 に設定されているデスクトップ ブレークポイントに到達するまで、col-xs が適用され続けます。