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

固定ラッパーを使用してブートストラップ グリッドでのスタックを防ぐ方法

ブートストラップでは、グリッド システムにより、ビューポートの幅に応じて列を応答的にスタックできます。 。ただし、この動作は、固定幅コンテナーを使用する場合など、特定のシナリオでは望ましくない場合があります。

固定幅コンテナーで列がスタックしないようにするには、非スタック クラスを採用する必要があります。

Bootstrap 3 でのcol-xs-* の使用

Bootstrap 3 では、スタックしない列を定義するために、col-xs-* クラスを利用する必要があります。 xs (特小) ブレークポイントは最小の画面サイズを表し、最も極端な解像度での動作を制御するために使用されます。

例:

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

col-* の使用Bootstrap 4 の場合

Bootstrap 4 では、col-xs-* クラスは必要なくなりました。代わりに、ブレークポイント接頭辞のない Col-* クラスを直接使用して、非スタック列を定義できます。

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

実装

適切な非スタック列を組み込むことにより、クラスをグリッド システムに積み重ねると、ブラウザ ウィンドウのサイズが変更されたときに列が積み重なってしまうのを効果的に防ぎ、固定幅のコンテナ内でレイアウトがそのまま維持されるようにすることができます。

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