2012-03-06 47 views
8

私は、twittersのブートストラップに基づいた流体レイアウトを持っています。ブートストラップ流体レイアウト - 固定幅のサイドバー

<div class="container-fluid"> 
    <div class="row-fluid"> 
     <div class="span2"> 
      <!--Sidebar content--> 
     </div> 
     <div class="span10"> 
      <!--Body content--> 
     </div> 
    </div> 
</div> 

サイドバーに固定幅を設定することは非常に便利です。流体からの変更レイアウトは「静的」へと

220px 

にサイドバーの幅を設定し、私は、ウィンドウのサイズを変更するか、1024に私の解像度を変更した場合...体含有量は、サイドバーの下にジャンプします。どうすればこの問題を回避できますか?

EDIT: はそれを手に入れました。後で私の "解決策"を投稿します。おかげであなたの応答のために

+0

あなたは[jsfiddle](http://jsfiddle.net)のようなものを使用してテストケースを設置することはできますか?あなたがここで探している効果をかなり理解できません。 –

+13

あなたのこの有名な「解決策」は何でしたか? :) –

+0

はい、あなたのソリューションを投稿し、私もページ液の残りの部分と興味を持って、固定幅のサイドバーだ...私は –

答えて

8

私は、これは何が必要だと思う:http://jsfiddle.net/U8HGz/1/

+0

ではなく、サイドバーが固定されているためです。私の右の行/コンテナの幅はmh約3000-4000pxです。右にスクロールすると、サイドバーが常に上に表示されます。 あなたの応答のためにありがとう – Jens

27

私はあなたがこのような何かを探していると思う:あなたの便宜のために

<div class="sidebar span4"> 
    this is my fixed sidebar 
</div> 
<div class="main"> 
    <div class="container-fluid"> 
     <div class="row-fluid"> 
      <div class="span2">this is fluid</div> 
      <div class="span3 offset1">yeah!</div> 
      <div class="span6">Awesome!</div> 
     </div> 
     <div class="row-fluid"> 
      <div class="span6">1 half</div> 
      <div class="span6">2 half</div> 
     </div> 
    </div> 
</div> 

here'saフィドル:http://jsfiddle.net/TT8uV/2/

を一般的な注記:

ブートストラを使用する必要はありませんあなたの「メインコンテナ」などのp、あなたの サイドバーを置くことができるので、サイド・バイ・サイド(ブートストラップ 流体と反応するような)グリッドシステムと。この方法は、あなたは、実際の内容に影響を与えずに、 サイドバーのコントロールのLOTを持っています。

はそれがあなたのために働く願っています。

+3

これは、固定幅を解決する唯一の答えです。他は固定された位置についてです。 +1 – r03

+1

私はこの試みを感謝しますが、問題は、右側のメインの2番目の行が右側のサイドバーの下部よりも低く浮いていることです。 「1半分」と「2半分」(メインナビゲーションの2行目の流体のスパン)が、その下にどのように浮いているかに注目してください。http://jsfiddle.net/TT8uV/2/show/ –

+2

私はそうは思わないこれは解決策でなければなりませんが、どちらかの方法でオーバーフローで更新してください:ここの行への自動:http://jsfiddle.net/TT8uV/35/またはあなたができる位置:絶対サイドバーhttp://jsfiddle.net/TT8uV/36/ –

関連する問題