「いつも水平」とはどういう意味ですか？

Question

追加の小型デバイス用の新しいブートストラップ3のドキュメントexplains the grid behaviourは「常に水平」です。これは何を意味するのでしょうか？確かに小さなデバイスでは、すべての列が互いに垂直に積み重ねられますか？私がここで失敗するのは、グリッドが何であるかを私が理解していないことです。

私は非デザイナーの視点から、いくつかの製品をレスポンスグリッドに反復しようとしています。各行内の列の数は、奇数または偶数の製品が表示されているかどうかによって変わります。 < - ブートストラップなど、静的コンテンツは動的ページよりも単純です。たとえば、空にして<div class="col-xs*"></div>を挿入して12にする必要がありますか？

Answer 1

「水平方向」とは、col-xs- *が浮動小数点型からスタック型に変化するブレークポイントがないことを意味します。例：

この例では、電話、タブレット、デスクトップのいずれの場合でも、常に同じサイズの2つの列があります。コントラスト：デバイスのビューポートは、それが等しいサイズの2つの列に切り替わり、その時点で> = 768になるまで、この例では

<div class="col-sm-6"></div> 
<div class="col-sm-6"></div> 

、列が積層されます。

あなた自身が質問するかもしれない質問は、「これらのすべてのバリエーションはなぜですか？」という質問です。さて、これらのオプションは、私たちの手が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> 

明示的に電話のためのグリッドを指定していないので、積み重ねに戻すために起こっています。

しっかりした感触を得るには、いくつかの単純なグリッドを一緒にスローし、ブラウザのサイズ変更を開始します。あなたは、それがドキュメントそのものよりもずっと簡単にどのように変化するか見ることができるはずです。

EDIT興味深いかもしれない一つの他の例の

思想：二つの等しい列電話とタブレットの両方で、次いで75/25およびデスクトップ。コード：

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

これは実際には「常に水平」の素晴らしい図です。 col-smを指定していないため、col-xsはデスクトップブレークポイントに達するまで引き続き強制されます。デスクトップブレークポイントは992以上に設定されています。