ページを応答させるには、すべてのcol-xx-xxクラスを指定する必要がありますか？

Question

ブートストラップにはまったく新しい、既存のページをブートストラップタグに変換しようとしています。

私の質問はグリッドに関連しています。このページでは、http://blog.codeply.com/2016/04/06/how-the-bootstrap-grid-really-works/は、あなたがサポートしたい最小のデバイス幅にクラスを使うだけでいいということです。

モバイルデバイス、タブレット、中型画面、大型画面をサポートしたい場合は、col-sm-xxと入力するだけです。

私は

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

にdiv要素を設定した場合、私は、これは半分の画面サイズを取るだろうが、col-md-xxとcol-lg-xxブレークポイントにヒットしたときに、それは同じことを行うことを理解？

もしそうなら、なぜそれらのmdクラスとlgクラスを持つのが嫌なのですか？

Answer 1

col-6クラスの要素は、画面の半分を占めますが、モバイルでもデスクトップでも問題ありません。すべての画面に表示されます。 Bootstrapはカスタムブレークポイントを提供するので、col-sm-6のようなクラスを書くことができます。このルールは小さなデバイスにのみ適用されます。カスタムブートストラップのブレークポイントと解像度を見てください：

このオプションは、開発者がすべてのブレークポイントで自分のグリッドを変更できるようにするために作成されました。

Answer 2

答えははいです。しかし、さらに、グリッドの表示方法によっては、mdまたはlgのブレークポイントを使用します。たとえば、の3列のがタブレット（多分iPad）とデスクトップの両方に見えるほど大きいとしましょう。3枚の写真のように。しかし、携帯電話に3つの列を表示することは意味がありません。列に1つの写真を調整する必要があります。だから、ブートストラップに各写真にcol-md-4のグリッドを表示するように指示しますが、col-sm-12です。

<div class="row"> 
<div class="col-xs-12 col-md-4">photo here</div> 
<div class="col-xs-12 col-md-4">photo here</div> 
<div class="col-xs-12 col-md-4">photo here</div> 
</div> 

Answer 3

私はあなたの例に基づいて質問に答えます。そうする前に、デフォルトでdiv要素は100％の幅を持つか、またはブートストラップクラスの場合には、すべてのcol-XX-12クラスに相当し、それぞれが対応する層にあることに注意しなければなりません。

独自にcol-sm-6を使用してブートストラップグリッドシステムが動作する方法に基づいた場合、ここでは何が起こるかです：何col-xs-XXクラスが存在しないため

a）は、列の幅がデフォルトになります通常div 's、別名100％ b）sm解像度段（768px以上）から開始すると、列は親幅の6/12または50％になります。 c）高解像度ティアの他のクラスがない場合、50％幅はすべての解像度に上方向に渡ります。

あなたの質問に答えるために、なぜ 'col-md-6'や 'col-lg-6'のような、より高い解像度の層に使われる残りのクラスが必要なのでしょうか？それらの解像度の段で列の幅を異なる幅に変更する必要があります。

また、中間解像度ティアのクラスをスキップすることもできます。たとえば、列幅がこれらの解像度で同じ場合は、カラムが768pxから最大1199pxまでの50％の幅を持ち、カラムが66％を消費するようにするには、クラスcol-sm-6 col-lg-9を使用します。中間の値はcol-md-6です。値は小さい解像度の層から引き継がれるためです。

サイドノートとして、私が参照しているブレークポイントはブートストラップ3からのものですが、ブートストラップ4では変更されていますが、使用方法は変わりません。