Смутные проблемы с позиционированием

Question

Я перехожу из сетки 960 в Twitter. Бутстрап, который действительно является головной болью. Правильно знаю, что я манипулирую наземную структуру (Base.html, используя Django), но вывод не является тем, чем я хочу. Как я могу выполнить то, что хочу?

Вот HTML:

<div id="container"> 
    <header id='header'> 
     <!--Header content--> 
    </header> 
    <div id='main_container' class='row-fluid'> 
     <div id="main" role="main" class="span12"> 
      <div id='main_content' class="span9"> 
       <!--Main content--> 
      </div> 
      <div id='side_bar' class="span3"> 
       <!--Sidebar container--> 
      </div> 
     </div> 
    </div> 
</div> 

Выход:

__________________________________ 
|         | 
|    header    | 
|__________________________________| 
|      |   | 
|  main    | side | 
|  content   | bar  | 
|      |   | 
|      |   | 
|      |   | 
| <-------- main div -------> | 
|      |   | 
___________________________________ 

Желаемый результат:

__________________________________ 
|         | 
|    header    | 
|__________________________________| 
|#####|    |  |#####| 
|#####| main  | side |#####| 
| body| content  | bar | body| 
| BG |    |  | BG | 
|#####|    |  |#####| 
|#####|    |  |#####| 
|#####| <--- main div ---> |#####| 
|#####|    |  |#####| 
___________________________________ 

Примечание:

Я попытался изменить span12 в <div id="main" role="main" class="span12"> к span9. Тогда это работает, за исключением того, что все main div с его содержимым выравнивается влево). Это, однако, не может быть правильным способом, поскольку это означает, что div s внутри основного div вместе будут 12 (span9 + span3), хотя основной div равен 9.

Примечание 2: «#####» является фоновое изображение тела, что означает, что основной DIV должен быть сосредоточен и заполнить ~ 60% страницы по горизонтали.

Answer 1

После сумма собрата дивы с .span классов получить результат 12 (т.е. 12 = span9 + span3) вы должны установить новый DIV с .row-fluid класса, а затем положить другие дивы с .span классов внутри него. См. Twitter Bootstrap docs (вложенность жидкости).

<div id='main_container' class='row-fluid'> 
    <div id="main" role="main" class="span12"> 
     <div class="row-fluid"> 
      <div id='main_content' class="span9"> 
       <!--Main Container--> 
      </div> 
      <div id='side_bar' class="span3"> 
       <!--Sidebar Container--> 
      </div> 
     </div> 
    </div> 
</div> 

EDIT: Если вам нужно установить смещение, чтобы получить желаемый результат, попробуйте этот

<div id='main_container' class='row-fluid'> 
    <div id="main" role="main" class="span12"> 
     <div class="row-fluid"> 
      <div class="span2"> 
       <!-- empty --> 
      </div> 
      <div id='main_content' class="span6"> 
       <!--Main Container--> 
      </div> 
      <div id='side_bar' class="span2"> 
       <!--Sidebar Container--> 
      </div> 
      <div class="span2"> 
       <!-- empty --> 
      </div> 
     </div> 
    </div> 
</div> 

http://jsfiddle.net/DSNnT/

Или вы можете использовать offset классы.

Answer 2

Я думаю, что вы хотите поставить #main_container «рядной жидкости» внутри «контейнера», как это:

<div class="container"> 
    <div id='main_container' class='row-fluid'> 
    <div id="main" role="main" class="span12"> 
     <div class="row-fluid"> 
      <div id='main_content' class="span9"> 
       // main container 
      </div> 
      <div id='side_bar' class="span3"> 
       // sidebar container 
      </div> 
     </div> 
    </div> 
    </div> 
</div> 

Кроме того, вы «желаемого результата» показывает header--, что браузер или вы хотите, чтобы 100% -ная панель виджета сверху? Если это так, вы можете просто надеть навигацию сверху:

<div class="container-fluid"> 
<div class="navbar navbar-static-top"> 
    <div class="navbar-inner"> 
    <ul class="nav"> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
    </ul> 
    </div> 
</div> 
</div> 
<div class="container"> 
    <div id='main_container' class='row-fluid'> 
    <div id="main" role="main" class="span12"> 
     <div class="row-fluid"> 
      <div id='main_content' class="span9"> 
       // main container 
      </div> 
      <div id='side_bar' class="span3"> 
       // sidebar container 
      </div> 
     </div> 
    </div> 
</div> 
</div>