ブートストラップの 3 行を 12 列の制限を超えて拡張するにはどうすればよいですか?

行の 12 列制限を破るために Bootstrap 3 をカスタマイズする

問題

デフォルトでは、Bootstrap 3 は 12 単位を超える列を強制的にスタックします「float: none」動作のため、垂直方向に。この制限により、複数のコンテンツ ブロックを 1 つの行に追加できる動的レイアウトが妨げられる可能性があります。

解決策

この制限を破るには、カスタム CSS オーバーライドを適用してブートストラップの動作をオーバーライドし、行が対応できるようにすることができます。 12列以上。その方法は次のとおりです。

<code class="css">/* col-xs float fix for large column groups */
.large-group .col-xs-12 {
  float: left;
}

/* col-sm float fix for large column groups */
@media (min-width: 768px) {
  .large-group .col-sm-12 {
    float: left;
  }
}

/* col-md float fix for large column groups */
@media (min-width: 992px) {
  .large-group .col-md-12 {
    float: left;
  }
}

/* col-lg float fix for large column groups */
@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 サイトの他の関連記事を参照してください。