定位问题
定位问题
提问于 2013-04-08 18:08:57
我正在从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 in <div id="main" role="main" class="span12">改为span9。然后它就起作用了，除了所有main div和它的内容都会保持对齐)。然而，这不可能是正确的方法，因为这意味着主div中的12 (span9 +span3)将是12(span9+ span3)，尽管主div是9。
备注2: "#####“是主体的背景图像，这意味着主div应该居中并水平填充60%的页面。
回答 2
Stack Overflow用户
发布于 2013-04-08 18:15:13
在使用.span类的同级div之和之后，得到结果12 (即12 = span9 + span3)之后，必须用.row-fluid类设置新的div，然后将其他带有.span类的div放入其中。参见Twitter引导文档 (流体嵌套)。
<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类。
Stack Overflow用户
发布于 2013-04-08 18:41:20
我想你想把#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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15885944
复制相关文章
相似问题
腾讯云开发者
