固定佈局位置：固定側邊欄

Question

我在嘗試創建一個位置：使用引導程序修復側邊欄，但我還沒有取得任何成功。我嘗試可以總結與本質：

<div class="container"> 
    <div class="row"> 
    <div class="span3"> 
    </div> 
    <div class="span9"> 
    </div> 
    </div> 
</div> 

，並設置span3列的位置是固定的，並嘗試各種不同的CSS位置。但是，它似乎打破了span9的大小和定位。

我的嘗試是完全錯誤的嗎？或者我完全錯過了什麼？

謝謝！

Answer 1

這是不可能對準整個頁面中使用Twitter的引導或CSS中心。

但可能與一點的jQuery。

function sizing() { 
    var windowwidth=$(window).width(); 
    var containerwidth=$('.container').width(); 
    var diff=windowwidth-containerwidth+40; 
    $('#leftmargin').text("window="+ windowwidth+",container="+containerwidth); 
    if(diff>0) { 
    $('#leftmargin').css('margin-left', (diff/2) +'px'); 
    } else { 
    $('#leftmargin').css('margin-left', '20px'); 
    } 
} 
$(document).ready(sizing); 
$(window).resize(sizing); 

並添加ID = 「LEFTMARGIN」 像下面（向右滾動）：

<div class="row"> 
    <div class="span3" style="position:fixed;background-color:green;height:100%;top:0px;" id="leftmargin"> 
    position fixed navbar (out of .container) 
    </div> 
</div> 
<div class="container"> 
    <div class="row"> 
    <div class="span3" style="background-color:red">empty to avoid overflow</div> 
    <div class="span9 offset3" style="background-color:blue;"> 
     bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br> 
     bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br> 
     bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br> 
     bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br> 
     bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br> 
     bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br> 
    </div> 
    </div> 
</div>​ 

http://jsfiddle.net/baptme/NzqfL/

Answer 2

從我能理解的，你想要一個span3固定位置列。

以下代碼正在工作，但未居中。

<div class="row"> 
    <div class="span3" style="position:fixed;background-color:green;height:100%;top:0px"> 
     position fixed navbar (out of .container) 
    </div> 
</div> 
<div class="container" style="margin:0px"> 
    <div class="row"> 
    <div class="span3" style="background-color:red;height:100%">empty to avoid overflow</div> 
     <div class="span9 offset3"> 
      bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br> 
      bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br> 
      bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br> 
      bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br> 
      bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br> 
      bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br> 
     </div> 
    </div> 
</div>​ 

http://jsfiddle.net/baptme/A8HLL/48/