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 クラスは、ビューポート全体を満たす流体レイアウトを作成します。
• row-fluid クラスは、子要素が利用可能な幅を確実に埋めるようにします。
• .fixed クラスは、サイドバーの幅を設定します
• .fixed 兄弟要素の margin-left プロパティにより、コンテンツ領域はサイドバーの後に始まります。
• fill クラスは、container-fluid 要素の最小高さを 100% に設定し、サイドバーとコンテンツ領域が同じ高さになるようにします。
• .filler ::after 疑似セレクターによって作成された要素は、.filler div をオーバーレイし、両方の列の高さが等しいように見せかけます。

以上がTwitter Bootstrap で固定流動レイアウトを作成するには?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。