Question

我正在创建一个网站（我是一个菜鸟）。我正在研究设计的功能部分，我稍后会有人做图形。

目前，当它进入响应式（移动视图）时，它在右侧留下了2px的边距，可以在移动浏览器上移动（并且可滚动）。我不能为我的生活摆脱那个。

如果我打开overflow-x：hidden，那么它确实变得不可滚动但仍然可以移动。

我想要额外的空间消失。我没有看到它在任何一个css中被定义为填充。

使用Bootstrap 2.3

Answer 1

通过将此添加到我的自定义css解决：

html, body {
  width: auto !important;
  overflow-x: hidden !important;
}

注意：!important仅被使用，因此它优先于其他CSS。如果您在引导CSS之后加载自定义CSS，则大多数实例不需要!important。

Answer 2

我知道我在这里的比赛已经很晚了，但我发现了为什么会发生这种情况。如果您使用的是导航栏，则navbar-right元素中应该有一些不应该存在的额外填充。它有15px的保证金权利，导致这个差距。覆盖它并解决问题！

Answer 3

将.container类替换为正文中的.container-fluid和 .css文件中的padding right and left : 0px; 就是这样。

Answer 4

我尝试过这样做，但它仅适用于基于浏览器的移动模拟器。当我调整浏览器大小时，它也可以很好地工作。

但是，当我在手机上查看时 - 三星Galaxy S2＆amp; iPhone 5，它仍然显示我的空白区域。

我也尝试过：

@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;}
}

Answer 5

删除margin-left，margin-right

并改变

    <div class="navbar">
    <div class="navbar-inner navbar-fixed-top">

到

    <div class="navbar navbar-fixed-top">
    <div class="navbar-inner">`

Answer 6

我通过简单地将.row包装在另一个.container-fluid类元素中来解决这个问题。这应该照顾边际。

Bootstrap 2.3 CSS响应左侧有一个空白区域

6 个答案: