web-dev-qa-db-ja.com

Twitter Bootstrapを使用して2列（固定-流体）レイアウトを作成する方法

2列レイアウト（固定-流体）レイアウトを作成することは可能ですか（ http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-21-fixed-fluid/ =）with Twitter Bootstrap（http://Twitter.github.com/bootstrap/）？

解決策はありますか？

csstwitter-bootstrapbootstrap-4fluid-layout
44
mbecker

-別のアップデート-

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

以下にあるCSSとTwitterから取得したわずかに変更されたHTMLコードを使用して、固定流体構造を実装することができますBootstrapスキャフォールディング：レイアウトドキュメントページ：

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％を占めるようにするには、htmlとbodyの高さを100％に設定し、.fillという新しいCSSクラスを作成する必要があります。最小高さ100％：

html, body {
    height: 100%;
}

.fill { 
    min-height: 100%;
}

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

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

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

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

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

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に変更する必要があります。
63
My Head Hurts

2018年に更新

ブートストラップ4

BS4はflexboxであるため、fixed-fluidは簡単です。固定列の幅を設定し、流体列で.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..

fixed-fluidレイアウトへの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 内のコンテナ流体を含む固定幅列
Bootstrap 4で左列を固定し、右スクロール可能にする方法、応答しますか？

12
Zim