1

我正在从 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为. 然后它就可以工作了，除了它的内容的所有内容都左对齐）。然而，这不是正确的做法，因为这意味着main 中的 s一起将是( + )，即使 main是.<div id="main" role="main" class="span12">span9main divdivdiv12span9span3div9

注意 2： “#####”是 body 的背景图片，这意味着主 div 应该居中并水平填充约 60% 的页面。

4

2 回答 2

1

After sum of sibling divs with .span classes get result 12 (i.e. 12 = span9 + span3) you must set new div with .row-fluid class and then put other divs with .span classes inside of it. See Twitter Bootstrap docs (fluid nesting).

<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: If you need to set offset to get desired result, try this

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

Or you can use offset classes.

于 2013-04-08T18:15:13.507 回答
1

我想你想把#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>
于 2013-04-08T18:41:20.200 回答