45

Twitter Bootstrap ( http ://twitter.github.com/bootstrap/)?

解決策はありますか？

4

2 に答える 2

63

- もうひとつのアップデート -

クラスが削除された Twitter Bootstrap バージョン 2.0 以降.container-fluid、ブートストラップ クラスだけを使用して 2 列の固定流動レイアウトを実装することはできませんでしたが、いくつかの小さな CSS 変更を含めるように回答を更新しました。これを可能にする独自の CSS コードで

以下にある CSS と、Twitter Bootstrap Scaffolding : layoutsドキュメント ページから取得したわずかに変更された HTML コードを使用して、固定流体構造を実装することができます。

HTML

<div class="container-fluid fill">
    <div class="row-fluid">
        <div class="fixed">  <!-- we want this div to be fixed width -->
            ...
        </div>
        <div class="hero-unit filler">  <!-- we have removed spanX class -->
            ...
        </div>
    </div>
</div>

CSS

/* CSS for fixed-fluid layout */

.fixed {
    width: 150px;  /* the fixed width required */
    float: left;
}

.fixed + div {
     margin-left: 150px;  /* must match the fixed width in the .fixed class */
     overflow: hidden;
}


/* CSS to ensure sidebar and content are same height (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;  
}

サイドバーとコンテンツを同じ高さにすることの背後にある概念を説明しているため、2.0をサポートするための編集により流動的なソリューションになりましたが、以下の回答を維持しました（コメントで特定された質問者の質問の重要な部分）

重要

以下の答えは流体流体です

更新 @JasonCapriotti がコメントで指摘したように、この質問に対する元の回答 (v1.0 用に作成) は Bootstrap 2.0 では機能しませんでした。このため、Bootstrap 2.0 をサポートするように回答を更新しました。

メイン コンテンツが画面の高さの少なくとも 100% を占めるようにするには、 と の高さを 100% に設定し、最小高さが 100% の新しい css クラスを作成する必要がhtmlありますbody。.fill

html, body {
    height: 100%;
}

.fill { 
    min-height: 100%;
}

.fill次に、画面の高さの 100% を占める必要がある任意の要素にクラスを追加できます。この場合、最初の div に追加します。

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

サイドバーとコンテンツ列の高さを同じにすることは非常に難しく、不必要です。::after代わりに、擬似セレクターを使用しfillerて、2 つの列が同じ高さであるかのような錯覚を与える要素を追加できます。

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

.filler要素が要素に対して相対的に配置されるようにするには、次の.fillように追加position: relativeする必要があり.fillます。

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

.filler最後に、スタイルを HTMLに追加します。

HTML

<div class="container-fluid fill">
    <div class="row-fluid">
        <div class="span3">
            ...
        </div>
        <div class="span9 hero-unit filler">
            ...
        </div>
    </div>
</div>

ノート

  • ページの左側の要素をフィラーにする必要がある場合は、に変更する必要がありright: 0ますleft: 0。
于 2012-01-05T10:38:29.013 に答える
12

2018年アップデート

ブートストラップ 4

BS4 がフレックスボックスになったので、固定流体はシンプルです。固定列の幅を設定.colし、流体列でクラスを使用するだけです。

.sidebar {
    width: 180px;
    min-height: 100vh;
}

<div class="row">
    <div class="sidebar p-2">Fixed width</div>
    <div class="col bg-dark text-white pt-2">
        Content
    </div>
</div>

http://www.codeply.com/go/7LzXiPxo6a

ブートストラップ 3 ..

固定流動レイアウトへのアプローチの 1 つは、Bootstrap のブレークポイントに合わせたメディア クエリを使用することです。これにより、固定幅の列のみを大きな画面で使用し、レイアウトを小さな画面でレスポンシブにスタックできるようにします...

@media (min-width:768px) {
  #sidebar {
      min-width: 300px;
      max-width: 300px;
  }
  #main {
      width:calc(100% - 300px);
  }
}

Working Bootstrap 3 Fixed-Fluid Demo

関連する Q&A:
ブートストラップでコンテナー流体を使用した固定幅の列
Bootstrap 4 で列を固定して右にスクロール可能にする方法

于 2016-03-23T12:44:44.283 に答える