首頁 > web前端 > css教學 > 如何使用 Twitter Bootstrap 建立固定流體佈局?

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

Mary-Kate Olsen
發布: 2024-11-16 11:00:02
原創
868 人瀏覽過

How to Create a Fixed-Fluid Layout with Twitter Bootstrap?

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

簡介

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

實作

HTML

1

2

3

4

5

6

7

8

9

10

<div class="container-fluid fill">

  <div class="row-fluid">

    <div class="fixed">

      ...

    </div>

    <div class="filler">

      ...

    </div>

  </div>

</div>

登入後複製

CSS

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

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

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