Исправлена ​​боковая панель с TwitterBootstrap 2.3.5

Question

Я пытаюсь узнать, как реализовать фиксированную боковую панель с Twitter Bootstrap 2.3.5.

Вот фрагмент моего кода

<div class="container"> 
    <div class="row"> 
    <div class="span4" id="sidebar-left"> 
      <h2 id="sidebar-head">Hello</h2> 
      <p>Look at this stuff, isn't it neat wouldnt you think my collection complete. Wouldn't you think im a girl a girl who has everything.</p> 
      <!--sidebar nav--> 
      <ul class="nav nav-tabs nav-stacked" id="sidenav"> 
      <li><a href='#'>Home</a></li> 
      <li><a href='#'>About Me</a></li> 
      <li><a href='#'>Contact</a></li> 
     </ul> 
    </div> 

     <div class="span8" id="main"> 
      <h1>Some Text Here </h1> 
     </div> 
    </div> 
</div> 

Я добавил это в моем CSS, но #main и # боковая панель левый оказался на вершине другого:

#sidebar-left { 
    position:fixed; 
} 

#main { 
    background-color:#39C; 
    height: 1500px; 
} 

Что я делаю неправильно ?

Answer 1

После игры с кодом. Я, наконец, получил решение по моему запросу:

Во-первых: я установил # sidebar-left, чтобы поплыть влево. Это позволило убедиться, что # боковая левая сторона остается внутри контейнера. Проблема в том, что это # ​​# # # # # # # # # # # # # # # # # с левой стороны.

Чтобы решить эту проблему, я поместил #main в .offset4, чтобы переместить целые сетки div 4 вправо.

#sidebar-left { 
    position:fixed; 
    float: left; 
} 

<div class="span8 offset4" id="main"> 
      <h1>Some Text Here </h1> 
     </div> 

Answer 2

Вы, бедная несчастная душа, вы не указали место размещения. position: fixed; отлично ... но вам нужно top: 0;left: 0; или что-то определить его размещение.