twitter-bootstrap - 如何将 2 个 span4 嵌套在带有填充的 span8 内 - 并将它们并排放置（不堆叠）

Question

我有一个 span8 - 有 2 个嵌套的 span4：

<div class="row">
<div class="span8 content-left">
<div class="padder-big place-details">

<div class="span4">
   hello
</div>

<div class="span4>
   bye
</div>

</div></div></div>

大跨度8 中有填充 - 所以显然 2 个跨度4 的堆栈彼此重叠 - 我希望它们并排。

如何让它们并排放置并与底层网格保持对齐？

Answer 1

如果您在容器中有额外的水平填充，那么根据定义，内容不能再在（相同）网格中对齐，这就是内容被堆叠的原因。您应该删除额外的填充（可能将其移动到span4元素中）或创建自己的自定义span4样式，将您的额外填充考虑在内。

或者，您可以尝试添加row-fluid属性div.place-details（可以将内部跨度调整为“50%”），例如

<div class="padder-big place-details row-fluid">

<div class="span6">
   hello
</div>

<div class="span6">
   bye
</div>

</div>

见流体网格系统