2013-07-18 77 views
0

如何將導航欄放在海誓山盟之上給予以下小提琴?如何使用3col固定佈局堆疊左側導航欄?

小提琴:http://jsfiddle.net/VkvX3/

這是Photoshop處理的紅色,但它是我想要實現 enter image description here

我已經嘗試了包裝兩個堆疊中和,但沒有去什麼。

<div class="???"> 
     <div class="well sidebar-nav left"> 
     <ul class="nav nav-list"> 
      // o o o 
     </ul> 
     </div> 
     <div class="well sidebar-nav left"> 
     <ul class="nav nav-list"> 
      // o o o 
     </ul> 
     </div> 
    </div> 

回答

1

這樣的腳手架是否適合您?
http://www.bootply.com/68303

基本上兩個左側NAV塊是在相同的跨度,右手NAV是在它自己的跨度,並且中央塊處於嵌套容器。

我相信你會想要進一步定製這個,儘管如果你儘可能地使用標準引導網格,所有東西都會在狹窄的屏幕上堆疊和縮放。

祝你好運!

+0

太棒了!這工作。檢查這個小提琴 - > http://jsfiddle.net/GwCkp/18/。但是,現在我將主容器的寬度(第一行.html)設置爲1300px。這很好用,但我怎樣才能更優雅地調整中間部分。我需要中間部分(英雄和內容保持不低於640像素,因爲在那裏會有一個圖表與其他小部件,所以我想要修復它)。設置該英雄單位或父容器流體的寬度沒有似乎工作。謝謝! – JaJ

+0

另外,你知道如何減少導航欄之間以及導航欄和主要英雄單位之間的空白嗎?包含單位之間的主要緩衝區空間?(即我希望左側導航欄右邊距更接近 – JaJ

+0

由於某種原因,這個佈局是一箇中間的調整大小的野獸,我只想讓中間的容器停留在650,整個容器保持在1100px以內,也許我在這裏錯過了一些東西,在引導程序和流體/響應/靜態佈局中沒有看到很多好處。表很容易使用,但我確定我在這裏丟失了一些東西,因爲這是我第一次使用引導程序。 – JaJ