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

簡介：

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

自訂CSS方法：

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

標籤：

Header

    

        
Navigation
        
Content
    

CSS:

html, body, .container {
    height: 100%;
}
.container {
    display: table;
    width: 100%;
    margin-top: -50px;
    padding: 50px 0 0 0; 
}
.row {
    height: 100%;
    display: table-row;
}
.row .no-float {
    display: table-cell;
    float: none;
}

優點與注意事項：

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