ブートストラップ グリッド列が固定幅コンテナー内でスタックしないようにするにはどうすればよいですか?

ブートストラップ グリッド システム: 固定ラッパーによる列スタッキングの克服

ブートストラップのグリッド システムは、応答性の高いレイアウトを作成するための Web デザインの基本コンポーネントです。ただし、固定幅のコンテナを使用すると、ブラウザ サイズが小さくなるとグリッド内の列が垂直に積み重なる可能性があります。

問題:

固定幅のラッパーを使用する場合Bootstrap 3 では、ラッパー自体のサイズが同じであっても、ブラウザ ウィンドウのサイズを変更すると、グリッド列が折りたたまれて互いに積み重ねられます。

解決策: 非スタック クラスの使用

列が固定幅のコンテナー内でスタックされるのを防ぐために、Bootstrap は一連の「非スタック」クラスを提供します。これらのクラスはメディア クエリを使用して、特定の画面解像度でのデフォルトのスタッキング動作をオーバーライドします。

Bootstrap 3 では、非スタッキング クラスには col-xs- というプレフィックスが付けられます。これらのクラスを列に適用すると、小さい画面サイズで列が折りたたまれないようにすることができます。

例:

<code class="html"><div class="container-fixed">
  <div class="row">
    <div class="col-xs-4">.col-4</div>
    <div class="col-xs-4">.col-4</div>
    <div class="col-xs-4">.col-4</div>
  </div>
</div></code>

この例では、列は横向きのままになります。

Bootstrap 4 アップデート:

Bootstrap 4 では、非スタック クラスの概念が簡素化されました。 xs プレフィックスは必要なくなりました。代わりに、デフォルトの動作では列のスタックが防止されます。列を確実に並べて配置するには、標準の Col クラス (col-4 など) を使用します。

以上がブートストラップ グリッド列が固定幅コンテナー内でスタックしないようにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。