如何使用 Twitter Bootstrap 建立固定流體佈局？

使用Twitter Bootstrap 建立2 列固定流體佈局

簡介

建立具有固定寬度列和流體寬度列的佈局是常見的要求響應式網頁設計。這種佈局樣式支援固定的側邊欄或導覽面板以及適應不同螢幕尺寸的靈活內容區域。使用Twitter Bootstrap，可以實現這一點佈局。

實作

HTML

<div class="container-fluid fill">
  <div class="row-fluid">
    <div class="fixed">
      ...
    </div>
    <div class="filler">
      ...
    </div>
  </div>
</div>

CSS

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

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

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

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

說明

• container-fluid 類>
• container-fluid 類>
• container-fluid 類>
• container-fluid 類>

container-fluid 類別創建流體填充視口的流體佈局。 row-fluid 類別確保子元素填滿可用寬度。 .fixed 類別設定側邊欄的寬度為固定值（例如 150px）。 .fixed 同級元素的margin-left 屬性確保內容區域在fill 類別在容器流體元素上設定100% 的最小高度，確保側邊欄和內容區域具有相同的高度。 .filler 元素，由::after 偽選擇器，覆蓋 .filler div 並給出兩列高度相等的錯覺。

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