如何解决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/ 任何意见都非常感谢。

------------------ UPDATE ---------------------

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>

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

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