css - 带有 span4 标签的 Twitter Bootstrap 响应问题

Question

我有一个演示站点，位于此处，可让您了解正在发生的事情。如果您滚动到底部，您会看到 9 个单独的帖子，它们的布局都正确。但是，如果您将屏幕缩小到小于 1232 像素，您会看到第 7 个帖子与其他帖子分离并向下移动。

现在我使用默认样式来对齐它们，使用 row 然后 span4。任何人都可以解释为什么会这样吗？以及有什么办法解决吗？

Answer 1

您的跨度总数应加起来为 12。但是，您的示例站点加起来超过 40！如果您不按预期使用它，我认为没有任何定义的行为会发生什么。

来自 Bootstrap 主页

“默认的 Bootstrap 网格系统使用 12 列”

因此，您的跨度总数必须增加到每行 12 个。IE。

<div class="row">
  <div class="span4">...</div>
  <div class="span8">...</div>
</div>
<div class="row">
  <div class="span3">...</div>
  <div class="span3">...</div>
  <div class="span3">...</div>
</div>
<div class="row">
  <div class="span7">...</div>
  <div class="span3 offset2">...</div>
</div>