twitter-bootstrap 如何在 twitter bootstrap 中对流体行进行填充
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14735562/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to do padding on a fluid row in twitter bootstrap
提问by Surya
<div class="internal-wrapper row-fluid">
<div class="Header span12">
<div class="HeaderTitle span6"></div>
<div class="span6"></div>
</div>
</div>
Now, when I do padding on internal-wrapper, I am expecting the padding to effect on the entire grid! inside it. But an overflow is occurring (I think, the right padding is not working)
现在，当我对内部包装器进行填充时，我希望填充会影响整个网格！在里面。但是正在发生溢出（我认为，正确的填充不起作用）
.internal-wrapper {
padding-left: 30px;
padding-right: 30px;
}
The blue bar below represents Headerclass. The green box, represents padding! So, Its happening on left but not right
下面的蓝条代表Header班级。绿色框，代表填充！所以，它发生在左边而不是右边
回答by Dan Blows
.row-fluidis 100% width. Because it's using a border-box layout, any padding you put is added to that 100%. See http://paulirish.com/2012/box-sizing-border-box-ftw/. However, setting it to use the content-box model will probably cause other problems in Bootstrap.
.row-fluid是 100% 宽度。因为它使用边框框布局，所以您放置的任何填充都会添加到 100%。请参阅http://paulirish.com/2012/box-sizing-border-box-ftw/。但是，将其设置为使用内容框模型可能会导致 Bootstrap 出现其他问题。
How to fix it - add an inner element with the padding.
如何修复它 - 添加一个带有填充的内部元素。
<div class="row-fluid">
<div style="padding-left: 30px; padding-right: 30px;">
...
</div>
</div>
回答by isherwood
I can't see (or discern) from your post what's wrong, but here's my guess: By placing padding on an element that Bootstrap sizes, you've altered its width. Try putting margin on .Header instead.
我无法从您的帖子中看到（或辨别）出了什么问题，但这是我的猜测：通过在 Bootstrap 大小的元素上放置填充，您已经改变了它的宽度。尝试将边距放在 .Header 上。
If this doesn't help, please create a demo: http://jsfiddle.net/
如果这没有帮助，请创建一个演示：http: //jsfiddle.net/
