你能用 Bootstrap 建立 7 列佈局嗎？

是否可以使用 Bootstrap 建立 7 個相等的欄位？

使用 Bootstrap 時，通常會建立偶數列以實現平衡佈局。但是，您可能會遇到需要奇數列的情況，例如 7。

使用 CSS 覆蓋列寬

雖然 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中文網其他相關文章！