<分区>
编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
关闭 8 年前。
html - Bootstrap 布局问题 - 多列平铺
嗨，我希望有人能帮助我。我是 Bootstrap 的新手，我可以了解列布局及其工作原理。但是，当我想在不同的高度创建不同的列时，我遇到了一个问题。
我正在尝试实现以下布局:
我遇到的问题是试图让 tab3 处于该位置，我需要将它堆叠在 tab2 下方。我设法通过添加标记的边距来整理 tab5 和 6，但我认为这对于 tab3 来说太乱了。
bootply (感谢@Gorostas)
最佳答案
关于 bootstrap 的网格系统，您始终可以在其他列中创建列。 我只显示上半部分，因为你已经完成了下半部分。
<div class ="container">
<div class ="row"> <!--Use a Row to keeps columns on the same line for the top half-->
<div class="col-md-8"> <!--Tab 1-->
</div>
<div class="col-md-2"> <!--Space for Tab 2 and 3-->
<div class="row"> <!--Row is not necassery when using 12 but I use them for smaller columns viewed on a smaller viewport-->
<!-- "col-md12" make use of all spacing of the grid that is available within the parent-->
<div class="col-md-12"> <!--Uses up full portion of the col-md-2 spacing-->
</div> <!--Tab 2-->
<div class="col-md-12"> <!--Uses up full portion of the col-md-2 spacing-->
</div> <!--Tab 3-->
</div>
</div>
<div class="col-md-2">
</div> <!--Tab 4-->
</div>
<div class="row">
<!-- Bottom half of tabs-->
</div>
</div>
http://www.bootply.com/wG58MwAews
如果您使用默认的 Bootstrap 3，您的网格将水平 12 个 block 。如果您在一个列中创建一个新列，它将将该列分成 12 列并将其相对于网格系统定位，http://getbootstrap.com/examples/grid/ ，您可以像我的示例一样将其分解为另外 12 个 block 。如果您需要更详细的解释，请发表评论，但这应该可以完成工作。
关于html - Bootstrap 布局问题 - 多列平铺，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27484099/