twitter-bootstrap Twitter Bootstrap:嵌套行?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/13463296/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter Bootstrap: nested rows?
提问by StackOverflowNewbie
Twiter Bootstrap Question: Given the image below, how do I mark up the 3 red containers so that they are fluid and responsive? Can I define a container/row inside a span*? Not sure how to tackle such a layout.
Twiter Bootstrap 问题:根据下图,我如何标记 3 个红色容器以使其流畅且响应迅速?我可以在 a 中定义一个容器/行span*吗?不知道如何处理这样的布局。


回答by mila_frerichs
Sure you can nest rows inside other spans as deep as you like.
当然,您可以根据需要在其他跨度内嵌套行。
<div class="container-fluid">
<div class="row-fluid">
<div class="span9">
<div class="span4"></div>
<div class="span4"></div>
<div class="span4"></div>
</div>
<div class="span3"></div>
</div>
</div>
that should work for your 3 containers inside the 9 row.
这应该适用于第 9 行内的 3 个容器。
回答by Rakesh Tembhurne
You can nest row inside row, but then you have to make sure that markup is correct.
您可以在行内嵌套行,但是您必须确保标记正确。
<div class="container-fluid">
<div class="row-fluid">
<div class="span9">
<div class="row-fluid">
<div class="span4">...</div>
<div class="span4">...</div>
<div class="span4">...</div>
</div>
</div>
<div class="span3">...</div>
</div>
</div>
Follow the link to view working example with this. Try moving vertical bar between HTML and Result view, and you will see responsive layout working then and there. Three Responsive columns with Twitter Bootstrap
按照链接查看工作示例。尝试在 HTML 和 Result 视图之间移动垂直条,你会看到响应式布局在那里和那里工作。三个带有 Twitter Bootstrap 的响应式专栏
回答by Jonathan Vanasco
Have you tried this nesting order :
您是否尝试过这种嵌套顺序:
- container-fluid
- row-fluid
- span9
- row-fluid
- span3 span3 span3
- 容器流体
- 排液
- 跨度9
- 排液
- span3 span3 span3

