如何使用 Twitter Bootstrap 建立固定流動的 2 列佈局？

如何使用Twitter Bootstrap 實現固定流動的2 列佈局

背景

建立一個固定寬度的2 列佈局列和一個流體寬度列佈局列是一種常見的設計模式。 Twitter Bootstrap 的早期版本允許使用 .container-fluid 類別來實現此目的，但 Bootstrap 2.0 及更高版本中不再支援此操作。

解決方案

要解決此問題，我們可以採用以下組合CSS 和稍微修改的 HTML程式碼：

HTML

<div class="container-fluid fill">
    <div class="row-fluid">
        <div class="fixed">...Fixed Column...</div>
        <div class="hero-unit filler">...Fluid Column...</div>
    </div>
</div>

CSS

/* Fixed-Fluid Layout CSS */

.fixed {
    width: 150px;  /* Fixed width for fixed column */
    float: left;
}

.fixed + div {
    margin-left: 150px;  /* Match fixed width from .fixed class */
    overflow: hidden;
}

/* Content Height Equalization CSS (optional) */

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;  
}

註解

• 將.fixed 寬度調整為您想要的固定列大小。
• 要在左側顯示流體列，請將 .filler CSS 中的 right: 0 替換為 left: 0。
• 附加 CSS 是可選的，但可確保固定和液柱高度相同。

以上是如何使用 Twitter Bootstrap 建立固定流動的 2 列佈局？的詳細內容。更多資訊請關注PHP中文網其他相關文章！