ブートストラップ グリッド列が固定ラッパーでスタックされないようにするにはどうすればよいですか?

固定ラッパーを使用したブートストラップ グリッドに非スタッキング列クラスを使用する

固定ラッパーを使用してブートストラップのグリッド システムを使用する場合、列が垂直にスタックされないようにすることができます。ブラウザのサイズが変更されます。

これを実現するには、小さな画面用に特別に設計された 非スタッキング Col-xs-* クラスを使用します。これらのクラスは、デフォルトの応答動作をオーバーライドし、列が固定ラッパー内で横並びのままになるようにします。

<code class="html"><div class="container">
  <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>

デモ: http://bootply.com/80085

Bootstrap 4 の注意:

Bootstrap 4 では、非スタッキング列に 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 サイトの他の関連記事を参照してください。