1

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

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

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

页面结构如下（都是非流式的）：

container
 row
  span12
   row
    span12

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

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

我可以通过在 Chrome 的开发者工具中禁用样式来重新做正确的事情，但我知道我不应该去编辑 Bootstrap CSS 来让它快乐。

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

4

2 回答 2

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;
    }
}
于 2013-05-29T00:17:35.957 回答
0

问题是我正在设计我的行的背景颜色，而不是我的跨度。一切都嵌套得很好，但看起来我的 span12 正在推离页面 - 这实际上只是该行的负边距起作用

于 2013-05-29T15:26:35.723 回答