首頁 > web前端 > css教學 > Twitter Bootstrap 是否可用於建立具有固定寬度側邊欄和流動寬度主要內容區域的兩列佈局?

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

Mary-Kate Olsen
發布: 2024-11-14 22:01:02
原創
292 人瀏覽過

Can Twitter Bootstrap be used to create a two-column layout with a fixed-width sidebar and a fluid-width main content area?

使用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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板