Bootstrap 2.3 CSS Responsive 左侧有一个空白区域
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17005500/
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
Bootstrap 2.3 CSS Responsive left with a white space on the right
提问by Andrew
I'm creating a website (and I'm a noob at this). I'm working on the functionality portion of design and i'll have someone do graphics later.
我正在创建一个网站（我是一个菜鸟）。我正在研究设计的功能部分，稍后我会请人做图形。
Currently when it goes into responsive (mobile view) it leaves a 2px margin on the right that is movable on a mobile browser (and scrollable). I can't for the life of me get rid of that.
目前，当它进入响应式（移动视图）时，它会在右侧留下 2px 的边距，该边距可在移动浏览器上移动（并且可滚动）。我这辈子都无法摆脱它。
if I turn on overflow-x: hidden, then it does become non scrollable but still movable.
如果我打开溢出-x：隐藏，那么它确实变得不可滚动但仍可移动。
I want that extra space to go away. I don't see it defined as padding in any of the css.
我希望多余的空间消失。我没有看到它在任何 css 中定义为填充。
Using Bootstrap 2.3
使用 Bootstrap 2.3
回答by Andrew
Solved by adding this to my custom css:
通过将其添加到我的自定义 css 中解决：
html, body {
width: auto !important;
overflow-x: hidden !important;
}
Note: the !importantis only being used so it takes priority over other CSS. Most instances will not need !importantif you load your custom CSS after your bootstrap CSS.
注意：!important仅被使用，因此它优先于其他 CSS。!important如果在引导 CSS 之后加载自定义 CSS，则大多数实例将不需要。
回答by Anna Wygant
I know I'm super late to the game here but I figured out why this happens in the first place. If you're using a navbar, there's some extra padding in the navbar-right element that shouldn't be there. It has a margin-right of 15px that causes this gap. Overwrite it and problem solved!
我知道我在这里玩游戏太晚了，但我首先弄清楚了为什么会发生这种情况。如果您使用的是导航栏，则导航栏右侧元素中有一些不应该存在的额外填充。它的边距为 15px，导致了这个差距。覆盖它并解决问题！
回答by Nilesh
Replace .containerclass with .container-fluidin body and in your .css filemake the padding right and left : 0px;That's it.
将.containerclass替换为.container-fluidin body 并在您的.css 文件中创建padding right and left : 0px;就是这样。
回答by Ritesh A
I have tried doing this, but it worked only on browser based mobile emulators. It also works nicely when I resize my browser.
我试过这样做，但它只适用于基于浏览器的移动模拟器。当我调整浏览器大小时，它也能很好地工作。
But, when I check it on my phone - Samsung Galaxy S2 & iPhone 5, it still shows me the white space.
但是，当我在手机（三星 Galaxy S2 和 iPhone 5）上查看时，它仍然显示空白区域。
I also tried:
我也试过：
@media handheld and (max-width: 481px) and (orientation: portrait) {
html,body{width:100%;overflow-x:hidden;}
}
@media handheld and (max-width: 380px) and (orientation: portrait) {
html,body{width:100%;overflow-x:hidden;}
}
回答by andromeda
I solved this by simply wrapping the .row in another .container-fluid class element. This should take care of the margin.
我通过简单地将 .row 包装在另一个 .container-fluid 类元素中解决了这个问题。这应该注意边距。
回答by patnav
Remove margin-left, margin-right
删除 margin-left, margin-right
And change
并改变
<div class="navbar">
<div class="navbar-inner navbar-fixed-top">
to
到
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">`
