如何實現7個相等的Bootstrap列？

實作7 個相等的Bootstrap 欄位

在Bootstrap 中，使用預先定義的類別建立具有相等列的網格佈局非常簡單。但是，當嘗試建立七個這樣的列時，預設類別可能不夠。

要實現此目的，您需要使用一些 CSS3 @media 查詢來覆蓋預設列寬度。以下是詳細的細分：

• 修改列寬：

  為行容器和巢狀.col 建立專用類別（七列） -md-1 每列的類別。使用這種方法，您可以覆蓋預設列寬並針對此特定場景自訂它們。

• 媒體查詢：

  實現 @media 查詢調整列寬以適應不同的螢幕尺寸。對於 768 像素及以上的螢幕，將列寬設定為 100%。對於 992px 及以上的螢幕，計算寬度為 (100% / 7) = 14.285714285714285714285714285714%。此公式可確保所有七列的寬度相等。

• 工作簡報：

  透過 jsbin 提供即時程式碼簡報。點擊“完整頁面”以查看佈局。

透過執行下列步驟，您可以在更寬的 Bootstrap 容器中建立自訂 7 列網格佈局。請記住根據您的特定設計要求調整 CSS 值。

以上是如何實現7個相等的Bootstrap列？的詳細內容。更多資訊請關注PHP中文網其他相關文章！