自舉流體佈局 - 固定寬度的側邊欄

我有一個基於twitters bootstrap的流體佈局。自舉流體佈局 - 固定寬度的側邊欄

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

這將是非常不錯的側邊欄固定寬度。如果改變從流體到「靜態」的佈局和設置側邊欄的寬度

220px

，我調整窗口大小或更改分辨率爲1024 ...體內含量的側邊欄下的跳躍。我如何避免這種情況？編輯：明白了。稍後將發佈我的「解決方案」。感謝您的答覆

來源

2012-03-06 Jens

你可以使用像[jsfiddle]（http://jsfiddle.net）這樣的測試用例嗎？無法完全理解您在此尋找的效果。 – 2012-03-06 19:04:55

+13

那麼......你的這個着名的「解決方案」是什麼？ :) – 2012-03-20 09:58:38

是的，發佈您的解決方案，我也有興趣，固定寬度的邊欄與其餘的頁面流體......我無法完成 – 2012-10-31 16:15:04

我覺得這是你所需要的：http://jsfiddle.net/U8HGz/1/

來源

2012-03-07 10:25:12

nope，因爲側邊欄固定在位。我的右行/容器寬度約爲3000-4000像素。所以如果我向右滾動側邊欄總是在頂部。但感謝您的回覆 – Jens 2012-03-07 14:56:20

我認爲你正在尋找這樣的事情：

<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>

這裏'山撥弄爲了您的方便：http://jsfiddle.net/TT8uV/2/

正如一般說明：

你不需要使用bootstra p作爲您的「主要容器」，因此您可以將您的側欄與網格系統（如引導程序流體和響應）並排放置。這樣您就可以控制邊欄，而不會影響實際內容，因此您有A批次。

希望它適合你。

來源

2013-03-06 01:26:20

這是解決固定寬度的唯一答案。其他人是關於固定位置。 +1 – r03 2013-03-30 19:17:25

我很欣賞這種嘗試，但問題是，右手邊的第二行漂浮着低於右側邊欄的底部。注意'1 half'和'2 half'（它們是第二行中的跨度 - 主導航中的流體）在它下面浮動：http://jsfiddle.net/TT8uV/2/show/ – 2013-04-24 17:50:02

我不認爲這必須與解決方案，但無論哪種方式我更新溢出：自動到行在這裏：http://jsfiddle.net/TT8uV/35/或者你可以postion：絕對側邊欄http://jsfiddle.net/TT8uV/36/ – 2013-04-25 16:11:18

自舉流體佈局 - 固定寬度的側邊欄

回答

相關問題