Question

我从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 + { {1}}），即使主span3为div。

注2： ＆＃34; #####＆＃34;是主体的背景图像，这意味着主div应居中并水平填充页面的约60％。

Answer 1

在带有.span类的兄弟div的总和得到结果12（即12 = span9 + span3）之后，您必须使用.row-fluid类设置新div，然后将其他div添加到.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>

编辑：如果您需要设置偏移量以获得所需的结果，请尝试此

<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'row-fluid'放在'容器'里面，如下所示：

<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>

定位烦恼

2 个答案: