使用 Bootstrap 時，通常會建立偶數列以實現平衡佈局。但是，您可能會遇到需要奇數列的情況，例如 7。
雖然 Bootstrap 本身不提供 7 列系統，但它可以可以透過使用 CSS 覆蓋列的寬度來實現此目的。
<code class="css">@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%;
}
}</code>此媒體查詢使用類別col-md-1 （以及col-sm-1 和col-sm-1 ）設定所有欄位的寬度col-lg-1;) 至14.285714285714285714285714285714%（對於中型或更大尺寸的螢幕）。這可確保相等的列分佈。
要包含 7 列，您需要一個具有 7-cols 類別的父元素來套用覆蓋。
<code class="html"><div class="container">
<div class="row seven-cols">
<div class="col-md-1"></div>
<div class="col-md-1"></div>
<div class="col-md-1"></div>
<div class="col-md-1"></div>
<div class="col-md-1"></div>
<div class="col-md-1"></div>
<div class="col-md-1"></div>
</div>
</div></code>透過使用 CSS 覆蓋列寬並利用父元素，您可以使用 Bootstrap 建立 7 列佈局。請記住，這種方法需要額外的 CSS，並且最好盡可能堅持本機 Bootstrap 網格系統。
以上是你能用 Bootstrap 建立 7 列佈局嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
