如何解决引导容器溢出问题？

我使用引导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这个文章介绍了网格系统如何工作。

enter image description here

来源

2013-11-14 Xavier

小提琴看起来好吗？您可以尝试将* {box-sizing：border-box;}添加到您的CSS – SW4

@ExtPro谢谢。所以{box-sizing：border-box;}是用于外部div还是内部div？ – Xavier

是否有效？ – SW4

你在帖子中说：代码

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样式表，而不是内联。

来源

2013-11-14 13:15:45 mMoovs

这听起来很不错。我会玩我的代码。非常感谢！ – Xavier

如果它可以帮助你解决问题，不要忘记接受这个答案：P – mMoovs

如何解决引导容器溢出问题？

回答

相关问题