css - 1200 宽及以上的 Twitter Bootstrap 元素溢出页面边缘

Question

我是 Twitter Bootstrap 的新手，很难理解一些响应式行为/样式。我四处搜索，但要么我的问题措辞不当，这不是一个常见问题，要么我只是对显而易见的事情视而不见。

我正在使用网格框架，当我的文档宽度达到或超过 1200 像素时，我看到一些内容溢出了屏幕的左边缘。溢出发生在我从 1199 到 1200 时。低于 1200 的布局都没有同样的问题。

http://jsfiddle.net/xBD9k/ - 调整输出窗口直到文档宽度为 1200

页面结构如下(均为非流式):

container
 row
  span12
   row
    span12

据我所知，嵌套行和 span12 没有问题(我有充分的理由，我保证)，因为正负左边距似乎相互抵消以防止渐进缩进。

容器的显式宽度为 1170px，两边都有 margin: auto。但是第一行的呈现宽度为 1200px，margin-left: -30px，所以它总是悬在边缘上。然而，该行没有明确为其指定宽度的样式，并且其中的 span12 具有明确的宽度 1170 margin-left 30。

我可以通过在 Chrome 的开发者工具中禁用样式来使事情恢复正常，但我知道我不应该去编辑 Bootstrap CSS 来让它开心。

谁能告诉我为什么1200px及以上的样式会像这样溢出边缘？一旦我将宽度扩展到 1220px 左右，一切都可以很好地回到页面上。

Answer 1

您似乎混淆了行和跨度。文档宽度为 1200 的行即使嵌套也将具有相同的宽度。您必须跟踪的是您的跨度。

row - 1200px width
  span12 - 1170px width
    row - 1200px width
      span12 - 1170px width

原因是 span12 的硬编码宽度为 1170px，并且该行将左边距重置为 -30px

这部分css代码可能有助于解释

@media (min-width:1200px) {
    .row {
        margin-left: -30px;
        *zoom: 1;
    }

    .container {
        width: 1170px;
    }

    .span12 {
        width: 1170px;
    }
}