Bootstrap 3のグリッドクラス（col-sm-＃およびcol-lg-＃）を理解する

Question 1

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

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

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

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

これは意図された動作ですか？
768pxを超えるものに2つの列が必要な場合、両方のクラスを適用する必要がありますか？（<div class="col-sm-6 col-lg-6">）
col-6 また含める必要がありますか？<div class="col-6 col-sm-6 col-lg-6">

Question 2

[以下の更新]

ドキュメントをもう一度見てみると、これについて具体的に説明しているセクションを見落としているようです。

私の質問への答え：

はい、特定の幅を超えるすべてのものではなく、特定の範囲にのみ適用することを目的としています。
はい、クラスは結合されることを意図しています。
col-＃クラスは基本的にcol-xsm-＃または0pxを超える幅（すべての幅）と同等であるため、これは特定の場合には適切であるように見えますが、他の場合には適切ではありません。

ドキュメントを読むのが速すぎることを除けば、「Bootstrap2の考え方」でBootstrap3に入ったので、混乱したと思います。具体的には、v2では（オプションの）レスポンシブスタイル（bootstrap-sensitive.css）を使用していましたが、v3はまったく異なります（IMOを改善するため）。

安定版リリースの更新：

この質問は、もともとRC1が出ていたときに書かれました。彼らはRC2にいくつかの大きな変更を加えたので、これを今読んでいる人にとっては、上記のすべてがまだ当てはまるわけではありません。

私が現在これを書いている時点では、col-*-#クラスは上向きに適用されているようです。したがって、たとえば、要素を電話の場合は12列（全幅）にし、タブレットの場合は2つの6列（半ページ）にしたい場合は、次のようにします。

<div class="col-xs-12 col-sm-6"> ... //NO NEED FOR col-md-6 or col-lg-6

（この質問が書かれた後、彼らは追加のxsブレークポイントも追加しました。）

Question 3

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

ミックスインなどもカバーしています。

Question 4

「768pxを超えるものに2つの列が必要な場合、両方のクラスを適用する必要がありますか？」

これは次のように単純である必要があります。

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

追加する必要はありません col-lg-6あまり。

デモ：http：//www.bootply.com/73119

Question 5

理解するための最良の方法は、単純に上から下へ（大型デスクトップから携帯電話まで）考えることです。

まず、B3は最初にモバイルであるため、xsを使用すると、大規模なデスクトップからxsまで列が同じになります（xsまたはsmを使用すると、すべての画面サイズですべてが希望どおりに維持されるため）

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

上記は画面の解像度に応じて幅を変更します。各クラスの合計列数= 12を維持していることを忘れないでください。

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

Question 6

上記のSDPの答えを修正するには、宣言する必要はありませんcol-xs-12で<div class="col-xs-12 col-sm-6">。ブートストラップ3はモバイルファーストであるため、すべてのdiv列はデフォルトで100％幅のdivであると見なされます。つまり、「xs」サイズでは100％幅であり、設定内容に関係なく、常にデフォルトでその動作になります。sm, md, lg。xs列を100％にしたくない場合は、通常、を実行しcol-xs-(1-11)ます。

Question 7

私たちのほとんどがBS4を使用していると思うので、これは遅いかもしれません。この記事では、あなたが尋ねたすべての質問を詳細かつ簡単な方法で説明し、いつ何をすべきかについても説明しました。bs4またはを使用するための詳細なガイドbootstrap

https://uxplanet.org/how-the-bootstrap-4-grid-works-a1b04703a3b7