1

我正在尝试创建一个位置：使用引导程序固定侧边栏，但我还没有取得任何成功。我的尝试基本上可以概括为：

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

并将 span3 列的位置设置为固定，并尝试各种不同的 css 位置。但是，它似乎打破了span9的大小和定位。

我的尝试完全错误吗？还是我完全错过了什么？

谢谢！

4

2 回答 2

0

使用 twitter bootstrap 或 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/

于 2012-06-11T21:42:57.493 回答
0

据我了解，您需要一个 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/

于 2012-06-10T21:15:02.487 回答