Проблемы с позиционированием

Я перехожу с сетки 960 на Twitter Bootstrap, что действительно является головной болью. Точно знаю, что я манипулирую наземной структурой (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 внутри основного div вместе будут 12 (span9 + span3), даже если основной div равен 9.

Примечание 2. "#####" — это фоновое изображение основного текста, что означает, что основной элемент div должен располагаться по центру и занимать примерно 60 % страницы по горизонтали.


css twitter-bootstrap positioning 960.gs
person holyredbeard    schedule 08.04.2013    source источник

Ответы (2)


arrow_upward
1
arrow_downward

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

<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 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 классов.

person Miljan Puzović    schedule 08.04.2013
comment
Большое спасибо за ваш ответ! Теперь я понимаю, что был недостаточно ясен. Главный блок не должен заполнять всю страницу по горизонтали. ##### должен быть фоновым изображением тела. С предоставленным вами решением я получаю желаемую структуру, за исключением того, что основной элемент div заполняет всю страницу. Есть ли способ сжать основной div по горизонтали и при этом сохранить структуру? - person holyredbeard; 08.04.2013

arrow_upward
1
arrow_downward

Я думаю, вы хотите поместить 'row-fluid' #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>

Кроме того, вы «желаемый вывод» показывает заголовок - это браузер или вам нужна панель виджетов 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>
person Zim    schedule 08.04.2013
comment
Большое спасибо! У меня уже есть все внутри контейнера (т.е. class='container'), но этот контейнер также включает заголовок. Должен ли я обернуть основной div с его содержимым в другой div с class='container'? - person holyredbeard; 08.04.2013
comment
Я также попробовал ваше решение для панели виджетов, и оно работает, за исключением того, что оно достигает только ~ 90% по горизонтали, что странно. У вас есть идеи, почему? - person holyredbeard; 08.04.2013
comment
Да, просто выньте его, если это контейнер. - person Zim; 08.04.2013