css - 如何解决 Bootstrap 容器溢出问题？

Question

我使用 Bootstrap css 样式化我的网站。
我的代码很简单

<div id="outer" class="container" style="border:solid">
    Test
    <div id="inner"class="container" style='border:solid width="1280px" '>
       some text
    </div>
</div>

因为我使用的是bootstarp，所以外部div的宽度是1170px，但是，正如你所看到的，我将内部div的宽度硬编码为1280px，比它的父div宽。
从下图中可以看出，内部 div 的右边缘与外部 div 重叠，但左边缘保持不变。

我的问题是，我该怎么做才能不仅扩展内部 div 的右侧，还扩展内部 div 的左侧。换句话说，始终保持内部 div 对齐中心。

这个你能帮我吗
http://jsfiddle.net/FQUXQ/
非常感谢任何输入。

- - - - - - - - - 更新 - - - - - - - - - - -

http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works这篇文章描述了网格系统是如何工作的。

Answer 1

您帖子中的代码说

style='border:solid width="1280px" '

但我猜你的意思是

style='border:solid;width:1280px"

但我认为这只是一个错字。但是，在另一个容器中使用 .container 并不是一个好主意，因为就像@Saravanan 所说的那样， Bootstrap 会根据屏幕大小(媒体查询..)给出宽度

相反，您应该将代码更改为

<div id="outer" class="container" style="border:solid">
    Test
    <div id="inner" class="row" style="border:solid">
       some text
    </div>
</div>

甚至更好，如果您希望在页面中有任何列，请使用

<div id="outer" class="container" style="border:solid">
    Test
    <div class="row" style="border:solid">
        <div class="col-lg-12" id="inner" >
           some text
        </div>
    </div>
</div>

如果您希望它在较小的视口(viewport)中表现不同，则可以为最后一个 div 的类赋予更多类。所以我要说的是:使用 Bootstrap 给你的元素并尝试按照它的意图使用它们。看看这个:http://getbootstrap.com/css/#grid

我建议使用单独的 css 样式表而不是内联。