ブートストラップ 3 行で 12 列を超える列を使用するには?

ブートストラップ 3 - 連続して 12 列を超える列を使用する

過剰な列の Float 動作をオーバーライドする

ブートストラップ 3 では、通常、.row div が使用されます。には 12 列が含まれており、追加の列はデフォルトではフローティングされません。これにより、幅の広い列が小さな列と重なる可能性があります。

これに対処するには、カスタム クラスを使用して過剰な列の float 動作をオーバーライドできます。

<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>

12 列を超える理由?

最初は、12 列を超える列を連続して使用するのは直観に反するように思えるかもしれませんが、実際には応答性を維持するという目的があります。 Bootstrap のドキュメントには次のように記載されています。

「1 行内に 12 を超える列が配置されている場合、追加の列の各グループは 1 つの単位として新しい行に折り返されます。」

例1 行に 24 列がある場合、画面サイズを縮小すると、それぞれ 12 列からなる 2 行になります。

例使用法

カスタム クラスの使用方法を示す例は次のとおりです:

<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>

以上がブートストラップ 3 行で 12 列を超える列を使用するには?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。