CSS Twitter Bootstrap：屏幕宽度较小的左侧和右侧的空白区域？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17560818/
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
Twitter Bootstrap: white space on left and right side in smaller screen widths?
提问by StackOverflowNewbie
I have markup similar to this:
我有类似的标记：
<div class="container-fluid">
<div class="container">
<div class="row">
<h1>Hello World!</h1>
</div>
</div>
</div>
Obviously, I want the .container-fluidto span the entire width of the screen. However, in smaller screen widths, it doesn't seem to do that. There appears a space on both sides of the screen, thus reducing the amount of screen real estate and affecting the overall look and feel I'm trying to achieve.
显然，我希望.container-fluid跨越整个屏幕宽度。然而，在较小的屏幕宽度中，它似乎并没有这样做。屏幕两侧出现了一个空间，从而减少了屏幕空间并影响了我试图实现的整体外观和感觉。
Is there a way to get rid of this space? I want .container-fluidto span the entire width of the screen regardless of the screen width.
有没有办法摆脱这个空间？.container-fluid无论屏幕宽度如何，我都想跨越整个屏幕宽度。
回答by Alexander Mistakidis
In bootstrap-responsive.css, the body gets a 20px padding on the left and right at smaller windows sizes. If you don't want that at all, remove it from your version. It's at line 803 and looks like this:
在 bootstrap-responsive.css 中，在较小的窗口尺寸下，主体在左侧和右侧获得 20 像素的填充。如果您根本不想要它，请将其从您的版本中删除。它位于第 803 行，如下所示：
@media (max-width: 767px) {
/*body { These are the lines you want to remove
padding-right: 20px;
padding-left: 20px;
}*/
If you just want to remove the white space on a certain element or class, add these margins to it:
如果您只想删除某个元素或类上的空白，请为其添加这些边距：
margin-left:-20px;
margin-right:-20px;
回答by webhazard
I had the same problem using Bootstrap 3.0. Solved it for small screens by putting:
我在使用Bootstrap 3.0 时遇到了同样的问题。通过放置解决小屏幕问题：
.container {
padding-right: 0; /*15px in bootstrap.css*/
padding-left: 0; /*idem*/
margin-right: auto;
margin-left: auto;
}
in my own stylesheet.
在我自己的样式表中。
回答by Shahid Iqbal
Simply
简单地
.container-fluid {
padding:0;
}
If scroll bar appears its due to border box, there must be
如果由于边框框出现滚动条，则必须有
box-sizing: border-box;
in relevant class to make scroll bar disappear
在相关类中使滚动条消失
回答by Niraj Shakya
Just add class 'p-0' beside 'container-fluid' class because in bootstrap padding:0 is already defined.
只需在 'container-fluid' 类旁边添加类 'p-0'，因为在 bootstrap padding:0 中已经定义。
<div class="container-fluid p-0">Content goes here</div>
回答by swat
The two white margins are created by the classes contentand body-content. If you are using these classes in any outer div, try removing these classes from them to remove the blank margins on either side of the page.
两个白色边距由类content和创建body-content。如果您在任何外部 div 中使用这些类，请尝试从它们中删除这些类以删除页面任一侧的空白边距。
