Twitter Bootstrap元素溢出页面边缘，宽度在1200或以上

Question

我是Twitter Bootstrap的新手，正在努力理解一些响应行为/样式。我已经搜索过了，但要么我的问题措辞不佳，这不是一个常见的问题，要么我只是对显而易见的事情视而不见。

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

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

页面结构如下(非流体):

container
 row
  span12
   row
    span12

据我所知，嵌套行和span - 12s没有问题(我有一个很好的理由，我保证)，因为左边的正负边距似乎相互抵消，以防止渐进缩进。

容器的显式宽度为1170px，两边margin: auto。然而，第一行的渲染宽度是1200px, margin-left: -30px，所以它总是挂在边缘上。然而，该行没有明确赋予其宽度的样式，并且其中的span12具有明确的宽度1170，左边框为30。

我可以通过在Chrome的开发者工具中禁用样式来使事情再次正确，但我知道我不应该去编辑引导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;
    }
}

Answer 2

问题是我是样式的背景色我的行，而不是我的跨度。一切都嵌套得很好但是看起来我的span - 12被推出了页面这实际上只是行负边距开始发挥作用