連続 12 列を超えるブートストラップの列フロート動作をオーバーライドするにはどうすればよいですか?

DDD
リリース: 2024-11-01 00:16:02
オリジナル
727 人が閲覧しました

How to Override Bootstrap's Column Float Behavior for More than 12 Columns in a Row?

無制限の列数に対するブートストラップの列浮動小数点動作のオーバーライド

ブートストラップ 3 では、行の最大列数が 12 に制限されていますが、場合によってはもっと使う必要がある。デフォルトでは、幅が 12 単位の列 (col-xs-12、col-sm-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>
ログイン後にコピー

ブートストラップの設計原則をバイパスすることは一般に推奨されませんが、このオーバーライドにより、コンテンツ豊富なレイアウトをより柔軟に作成できます。

以上が連続 12 列を超えるブートストラップの列フロート動作をオーバーライドするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート