2012-03-19 147 views
0

我想添加twitter引導框架到我的Django項目,我有點卡住了。我想創建網頁,不像谷歌地圖。twitter引導滾動側欄

在下面的圖片中,我想要有一個固定的標題,綠色(請忽略谷歌的具體內容,對我來說,它只是一個導航欄),其餘的頁面大小由地圖占主導地位,黃色,並在邊欄兩個谷歌廣告(或任何真正的廣告)頂部和底部(藍色)大部分都很容易,但是當我想在右側有一個滾動條並且內容超出頁面允許的範圍(從而影響滾動)時會出現問題。有沒有人做過這個或有一個工作的例子?我不知道我是否應該或不應該使用側邊欄類,我也認爲這是更左centic操作,並具有與對

編輯正確操作來撥弄:

它看起來就像我沒有足夠的信譽分,張貼圖片,它可以在這裏找到:

http://www.flickr.com/photos/douglaskastle/6996262105/sizes/l/in/photostream/

+1

一個相當複雜的佈局,你嘗試過什麼到目前爲止? – 2012-03-19 12:55:42

+0

我不得不承認我還沒有嘗試過很多,我總共引導了n00b,我知道我想要什麼,但是像我想要的那樣的例子不是現成的。我最接近的實現是我沒有藍色谷歌地圖位描述,我不能讓紅色信息滾動,它只是跑掉頁面 – 2012-03-19 13:12:39

+0

這是一個固定的佈局?像在一個固定寬度的容器裏面一樣?還是流體,就像谷歌地圖?即它延伸到屏幕的可用寬度。 – 2012-03-19 13:22:33

回答

0

我意識到,這是解決我的問題只是我看着它的錯誤的方式:

Fixed sidebar navigation in fluid twitter bootstrap 2.0

我錯過了它第一次,因爲我想我的內容/地圖是靜態的,邊欄滾動。我只是添加到HTML模板:

<style type="text/css"> 
.map-fixed { 
    padding: 9x 0; 
    position: fixed; 
    width : 510; 
} 
</style> 

所以在我的模板的身體,我能夠修正地圖,而不是邊欄

<div class="container"> 
    <div class="row"> 
    <div class="span12"> 
     <div class="row"> 
      <div class="span7 map-fixed"> 
       {{ form.map }} 
      </div> 

      <div class="span5 offset7"> 
       <div>{{ string|safe }}</div> 
      </div> 
     </div> 
    </div> 
    </div> 
</div> 
+0

我不相信你需要在在這裏排。你可以刪除第一個.row和.span12 – 2012-06-14 02:03:10