Twitter Bootstrap元素溢出页面边缘在1200宽和以上

我是新来的Twitter Bootstrap和努力了解一些响应行为/样式。我搜查了一下，但是我没有很好地解答我的问题，这不是一个常见问题，或者我只是对明显的盲目失明。Twitter Bootstrap元素溢出页面边缘在1200宽和以上

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

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

页的结构如下（所有非流体）：

container 
row 
    span12 
    row 
    span12

据我可以告诉有嵌套行和span12s没有问题（我有一个很好的理由，我保证），正面和负面的左边缘似乎相互抵消，以防止渐进式缩进。

容器的显式宽度为1170px，两边都为margin：auto。但是第一行的渲染宽度是1200px，margin-left：-30px，所以它总是挂在边缘上。然而，该行没有显式地给出该宽度的样式，并且其中的span12具有1170的空白左边的显式宽度，为30.

我可以通过禁用Chrome开发人员工具中的样式来使事情再次正确，但我知道我不应该去编辑Bootstrap CSS来让它开心。

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

来源

2013-05-28 tomfumb

你能复制它在一个JsFiddle吗？ – jmeas

@jmeas是我可以 - 编辑问题 – tomfumb

如果我为您的容器添加背景色，文本位于容器内，文档宽度为1200px。你能否澄清内容溢出的“边缘”？ –

它看起来像你混淆了跨度的行。文档宽度为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-29 00:17:35

感谢您的意见，我认为如果在您回答之前我没有弄清楚，那么这将使我得到我需要的地方。问题是我正在设计我的行的背景颜色，而不是我的跨度。一切都很好，但它看起来像我的span12正在推动页面 - 这实际上只是该行的负边缘进场 – tomfumb

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

来源

2013-05-29 15:26:35 tomfumb

Twitter Bootstrap元素溢出页面边缘在1200宽和以上

回答

相关问题