Исправлено расположение макета: фиксированная боковая панель

Question

Я пытаюсь создать позицию: фиксированная боковая панель с помощью бутстрапа, но я еще не успел. Мои попытки могут быть суммированы с по существу:

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

и установив положение столбца span3 быть исправлено, и пробовать различные различные позиции CSS. Однако, похоже, он нарушает размер и расположение span9.

Является ли моя попытка совершенно неправильной? Или я чего-то не хватает?

Спасибо!

Answer 1

Это невозможно выровнять всю страницу в центре с помощью 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); 

И добавить идентификатор = "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/