Bootstrap 3 の連続 12 列制限をオーバーライドするにはどうすればよいですか?

ブートストラップ 3: 行の列制限に対処する

ブートストラップ 3 のデフォルトの動作では、行の列数が 12 に制限されており、次の場合に問題が発生します。この制限を超えようとしています。これは、複数のコンテンツ ブロックを動的に追加するときに発生し、望ましくない重複が発生する可能性があります。

ブートストラップの動作のオーバーライド

この制約に対処するには、オーバーライドするカスタム クラスを作成できます。ブートストラップのデフォルトの動作では、行内に 12 列を超える列が許可されます。このクラスは .row コンテナに適用できます。

応答性の考慮事項

単一行には 12 列を超える列が許容されますが、応答性を考慮することが重要です。ブートストラップは、列の折り返しを利用して、さまざまな画面サイズにわたって列の位置が維持されるようにします。

サンプル コード

次のコードは、カスタム クラスの実装を示し、列が均等に正しくフロートされるようにします。連続して 12 単位を超える場合:

<code class="css">.large-group .col-xs-12 {
  float: left;
}

@media (min-width: 768px) {
  .large-group .col-sm-12 {
    float: left;
  }
}

@media (min-width: 992px) {
  .large-group .col-md-12 {
    float: left;
  }
}

@media (min-width: 1200px) {
  .large-group .col-lg-12 {
    float: left;
  }
}</code>

マークアップの例

次のマークアップは、カスタム クラスの使用法を示します:

<code class="html"><div class="container">
  <div class="row large-group" style="background-color:#ebebeb;">
    <div class="col-xs-9"><div style="background-color:#babeee;"><p>col 9</p></div></div>
    <div class="col-xs-3"><div style="background-color:#fefeeb;"><p>col 3</p></div></div>
    <div class="col-xs-12"><div style="background-color:#bada55;"><p>col 12</p></div></div>
  </div>
</div></code>

利点

このアプローチを使用すると、以下が得られます:

• さまざまなコンテンツ レイアウトに対応できる柔軟性。
• さまざまな画面サイズに動的に調整される応答性の向上.

以上がBootstrap 3 の連続 12 列制限をオーバーライドするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。