Twitter Bootstrap 是否可用於建立具有固定寬度側邊欄和流動寬度主要內容區域的兩列佈局？

使用Twitter Bootstrap 建立2 列（固定- 流動）佈局

在本文中，我們將深入研究是否可行具有固定寬度側邊欄和流動寬度主要內容區域的兩列佈局。我們將提供全面的解釋和解決方案來指導您的開發。

Twitter Bootstrap 有可能嗎？

Twitter Bootstrap 最初透過「.container-fluid」類別。不過，隨著2.0版本的發布，這個功能被刪除了。因此，僅使用標準 Bootstrap 類別不可能實現固定流體佈局。

解決方案

1.固定流體佈局

我們可以使用修改後的 HTML 和 CSS的組合來實現固定流體佈局：

HTML：

<div>

CSS：

.fixed {
    width: 150px;
    float: left;
}

.fixed + div {
     margin-left: 150px;
     overflow: hidden;
}

html, body {
    height: 100%;
}

.fill { 
    min-height: 100%;
    position: relative;
}

.filler::after{
    background-color:inherit;
    bottom: 0;
    content: "";
    height: auto;
    min-height: 100%;
    left: 0;
    margin:inherit;
    right: 0;
    position: absolute;
    top: 0;
    width: inherit;
    z-index: -1;  
}

2.相等的列高（可選）

要達到側邊欄與內容區域的等高：

HTML：

<div>

註解：

• 要讓側邊欄成為填充元素，請在 CSS 中將「right: 0」改為「left: 0」。

以上是Twitter Bootstrap 是否可用於建立具有固定寬度側邊欄和流動寬度主要內容區域的兩列佈局？的詳細內容。更多資訊請關注PHP中文網其他相關文章！