twitter-bootstrap 带有 colspan 之类的 Bootstrap 网格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23466625/
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
Bootstrap grid with something like colspan
提问by nedlud
How do I create this layout with Twitter Bootstrap...
如何使用 Twitter Bootstrap 创建此布局...
So that it stacks like this ...
所以它像这样堆叠......
I could do the layout as a table (currently it's an image map, but that was a quick and dirty short term solution), but as I understand bootstrap, the table wouldn't know how to stack the cells. I've seen a number of Bootstrap demos that give "rowspan" like functionality, but in this case I need a "colspan" like function. Can Bootstrap do this?
我可以将布局作为表格（目前它是一个图像映射，但这是一个快速而肮脏的短期解决方案），但据我了解引导程序，表格不知道如何堆叠单元格。我看过许多 Bootstrap 演示，它们提供类似“rowspan”的功能，但在这种情况下，我需要一个类似“colspan”的功能。Bootstrap 能做到这一点吗？
回答by Syjin
Assuming you want to use Bootstrap 3.1.1 something like this should work. You might have to add some tweaks but it should solve your problem. Basically you put your subheaders and your content blocks together in one column each, so that the stick together on smaller screens.
假设你想使用 Bootstrap 3.1.1 这样的东西应该可以工作。您可能需要添加一些调整，但它应该可以解决您的问题。基本上，您将副标题和内容块分别放在一列中，以便在较小的屏幕上粘在一起。
<div class="container">
<div class="row">
<div class="col-xs-2">
3
</div>
<div class="col-xs-10">
<div class="row">
<div class="col-sm-12">
Research complete
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div>Protocol and data</div>
<div>
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</div>
</div>
<div class="col-sm-4">
<div>Study specific</div>
<div>
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</div>
</div>
<div class="col-sm-4">
<div>Ethics/governance and regulatory</div>
<div>
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
