Bootstrap 網格系統可以建立 7 個相等的欄位嗎？

Bootstrap 的 7 等列網格系統

使用 Bootstrap 時，建立列數不均的佈局可能會很困難。 Bootstrap 網格系統通常遵循偶數，這讓許多人想知道 7 個相等的欄位是否可行。

答案在於使用 CSS3 @media 查詢覆蓋列寬。以下是實現它的方法：

1. 聲明容器類別： 首先建立一個容器類，7 列將駐留在其中。例如：

   <code class="html"><div class="container">
    ...
   </div></code>

2. 定義行和列結構： 在容器內，定義具有所需類別的一行和7 列：

   <code class="html"><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></code>

3. 計算列寬：根據列數（在本例中為7）決定適當的列寬。寬度的公式為：

   Width = 100% / Number of Columns

   因此，對於 7 列，寬度為 100% / 7 ≈ 14.2857%。

4. 覆蓋列寬使用媒體查詢： 若要覆寫預設列寬，請使用 CSS 媒體查詢來定位特定斷點。例如：

   <code class="css">@media (min-width: 992px) {
     .seven-cols .col-md-1 {
    width: 14.285714285714285714285714285714%;
     }
   }</code>

透過包含這些媒體查詢，您可以確保列寬根據螢幕尺寸進行調整。

工作演示：

訪問此線上演示，查看 7 個相等的列的實際效果：
[演示連結]

以上是Bootstrap 網格系統可以建立 7 個相等的欄位嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！