如何在 Twitter Bootstrap 中實現固定寬度的側邊欄和流動寬度的內容區域？

使用Twitter Bootstrap 實現固定流體佈局

儘管Twitter Bootstrap 很受歡迎，但人們對其創建兩個-具有固定寬度側面板和流動寬度內容區域的列佈局。

可能的解決方案：

原始解決方案（Bootstrap v1.0）

使用修改後的HTML 和CSS 的組合，可以在Bootstrap v1.0 中實現固定流體佈局。更新後的程式碼如下：

更新的解決方案（Bootstrap v2.0）

刪除「.container-fluid」類Twitter Bootstrap v2.0 中使原始解決方案不相容。但是，稍微修改CSS 即可實現兩列固定流體佈局：

確保側邊欄和內容的高度相等

雖然不是必需的，通常需要確保側邊欄和內容列具有相同的高度。這可以透過向流體寬度列添加“.filler”類別並使用 ::after 偽選擇器添加似乎填充剩餘空間的填充元素來實現。

註：

• 對於流體-流體佈局，將「.container-fluid」設定為最小高度為 100%。
• 要有填滿元素在頁面左側，變更「left: 150px;」到「右：0;」。

以上是如何在 Twitter Bootstrap 中實現固定寬度的側邊欄和流動寬度的內容區域？的詳細內容。更多資訊請關注PHP中文網其他相關文章！