如何使用自訂 CSS 在 Bootstrap 3 中建立全高列？

Bootstrap 3 全高列：自定義CSS 解決方案

簡介：

創建Twitter Bootstrap 3 的全高佈局可能具有挑戰性。雖然 Bootstrap 的原生類別不支援此功能，但可以使用自訂 CSS 來實現此效果。

自訂CSS 方法：

1. 設定100%高度：
   將body、container、row元素的高度設定為100%以確保它們跨越視口的整個高度。
2. 顯示為表格：
   使用 display: table 將容器元素轉換為表格。這允許容器的內容以表格結構排列。
3. 浮動單元格：
   向導航列新增自訂類，例如 no-float。將此類設定為具有 display: table-cell 和 float: none。這將防止導覽列浮動並允許其與內容列垂直對齊。

標記：

CSS：

優點和注意事項：

• 此自訂 CSS 解決方案提供與 Bootstrap 3 相容的全高佈局。
• 導覽與內容的 1:3 比例可以透過以下方式調整修改 CSS 中的列寬。
• 但是，使用自訂類別很重要（例如， no-float）而不是修改 Bootstrap 的原生列類別以避免衝突。

以上是如何使用自訂 CSS 在 Bootstrap 3 中建立全高列？的詳細內容。更多資訊請關注PHP中文網其他相關文章！