
Bootstrap で 7 つの等しい列を取得する
課題
Bootstrap のデフォルトの列システムが 12 であることを考えると、Bootstrap で 7 つの等しい列を取得するのは難しい場合があります。列。次のコード スニペットは、Bootstrap の組み込み列クラスを使用して 5 つの等しい列を作成する試みを示しています。
1 2 3 4 5 6 7 | <code class = "html" ><div class = "row" >
<div class = "col-md-2 col-md-offset-1" ></div>
<div class = "col-md-2" ></div>
<div class = "col-md-2" ></div>
<div class = "col-md-2" ></div>
<div class = "col-md-2" ></div>
</div></code>
|
ログイン後にコピー
ただし、これにより、必要な 7 列ではなく 5 列のみになります。
カスタマイズ列幅
この制限を克服するには、CSS3 @media クエリを使用してデフォルトの列幅をオーバーライドする必要があります。必要な列数に基づいて列の幅プロパティをカスタマイズすると、目的の効果が得られます。
コードの実装
次のコードは、ブートストラップで 7 列のグリッド システムを作成する方法を示しています。
1 2 3 4 5 6 7 8 9 10 11 | <code class = "html" ><div class = "container" >
<div class = "row seven-cols" >
<div class = "col-md-1" >Col 1</div>
<div class = "col-md-1" >Col 2</div>
<div class = "col-md-1" >Col 3</div>
<div class = "col-md-1" >Col 4</div>
<div class = "col-md-1" >Col 5</div>
<div class = "col-md-1" >Col 6</div>
<div class = "col-md-1" >Col 7</div>
</div>
</div></code>
|
ログイン後にコピー
標準のブートストラップ行と区別するために、7 列のクラスが外側の行に追加されます。
その後、カスタム CSS を使用して各列の幅が決定されます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <code class = "css" >@media (min-width: 768px){
.seven-cols .col-md-1,
.seven-cols .col-sm-1,
.seven-cols .col-lg-1 {
width: 100%;
*width: 100%;
}
}
@media (min-width: 992px) {
.seven-cols .col-md-1,
.seven-cols .col-sm-1,
.seven-cols .col-lg-1 {
width: 14.285714285714285714285714285714%;
*width: 14.285714285714285714285714285714%;
}
}
@media (min-width: 1200px) {
.seven-cols .col-md-1,
.seven-cols .col-sm-1,
.seven-cols .col-lg-1 {
width: 14.285714285714285714285714285714%;
*width: 14.285714285714285714285714285714%;
}
}</code>
|
ログイン後にコピー
幅の値 14.285714285714285714285714285714% は、100% を 7 (列数) で割って、列番号 (この場合は 1) を掛けることで得られます。この計算により、すべての列の幅が均等になることが保証されます。
カスタム CSS と 7 列クラスを組み合わせることで、異なる画面サイズに適応する 7 つの等しい列を持つ柔軟なグリッド システムを作成できます。
以上がブートストラップで 7 列のグリッド システムを作成するには?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。