如何在 Bootstrap 中建立 7 列網格系統？

在Bootstrap 中取得7 個相等的欄位

挑戰

鑑於Bootstrap 的預設欄位系統為12，實現7 個相等的欄位可能是一個挑戰列。以下程式碼片段示範了嘗試使用 Bootstrap 的內建列類別建立 5 個相等的列：

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

但是，這只會產生 5 列，而不是所需的 7 列。

自訂列寬

要克服此限制，需要使用 CSS3 @media 查詢覆蓋預設列寬。根據所需的列數自訂列的寬度屬性將達到預期的效果。

程式碼實作

以下程式碼示範如何在Bootstrap 中建立7 列網格系統：

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

將七列類別新增至外部行，以將其與標準Bootstrap 行區分開來。

然後使用自訂CSS 來確定每列的寬度：

<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% 除以列數在本例中為1）所獲得的。此計算可確保所有列具有相等的寬度。

透過結合自訂 CSS 和七列類，您可以建立一個具有 7 個相等列的靈活網格系統，以適應不同的螢幕尺寸。

以上是如何在 Bootstrap 中建立 7 列網格系統？的詳細內容。更多資訊請關注PHP中文網其他相關文章！