如何防止 Bootstrap 响应式布局右侧有额外空间？答案

【问题标题】：How do I prevent Bootstrap responsive layout extra space on right?如何防止 Bootstrap 响应式布局右侧有额外空间？
【发布时间】：2015-03-19 23:15:03
【问题描述】：

我正在处理的网站上的所有 Bootstrap 页面在内容右侧都有额外的空间。这个额外的空间会导致在移动设备、平板电脑和中等屏幕尺寸上水平滚动。当我在 24 英寸屏幕上打开非常宽的浏览器窗口时，问题不会发生。

我已经搜索过，但似乎没有一个答案可以解决我的问题。

即使在主页上也会出现这种情况，它没有任何额外的 js 插件，例如出现在其他页面上的灯箱。

我不知道是什么导致了这个问题。

【问题讨论】：

对我来说似乎还可以？
感谢 HenryW。这只是给了我一个灵感。看来这是浏览器的事情。它发生在 Mac 上的 Safari 6.0.2 以及 Android 平板电脑和 Android 手机上的 Chrome 中。在 Mac 和 Windows 7 上的 Firefox 和 Windows 7 上的 IE 11 中都很好。所以 Chrome 和 Safari 正在获得水平滚动。有什么想法吗？
我认为您的问题出在#id main-wrap 内，将该 div 放入名为 <div class="container"><div id="main-wrap">...</div></div> 的 div 中
仅供参考，刚刚用 CHROME 检查过，它也很好......没有问题@all（主页）+在 android（HTC ONE 手机）上检查......也很完美。
您好 HenryW，感谢您的提示。我会试一试。 Scooterlord 的 CSS 修复似乎已经在 Android 的 Chrome 上修复了它，但在 Safari 中没有（请参阅下面的评论）。感谢您在 Chrome 和您的手机上查看它。似乎是那些特定的浏览器/平台问题之一。

【解决方案1】：

...导致问题的原因是“carousel-indicators”类。

如果您覆盖当前代码或相应地更改它，以下代码将解决您的问题。

.carousel-indicators {
  left:auto;
  right:20px;
  margin-right:0;
  width:auto;
}

【讨论】：

嗨 Scooterlord，感谢您的代码。我已经做出了改变，所以我的 css 现在是：'.carousel-indicators { position: absolute; z指数：15；左：自动；右：20px；边距右：0；宽度：自动；列表样式类型：无；列表样式图像：无；列表样式位置：外部；底部：10px； }'
误击返回。继续 --> 它已经在 Android 手机上修复了它，但在我的 Mac 上的 Safari 中没有修复（这可能是某种缓存问题）。所以我会稍后再检查并回复。
我确定这是错误。确认后告诉我。
它仍然在 Galaxy Tab 4 (10.1") 上的 Chrome Android 和 Mac 上的 Safari 上到处移动。在 Moto E 上的 Chrome Android 上坚如磐石。与媒体查询有关可能适用于更大的显示器？虽然已经检查，但在这些媒体查询中没有引用 .carousel-indicators。有什么想法吗？
哦，我刚刚在 '@media (min-width: 768px) {...' 下找到了 .carousel-indicators。已进行修改，现在已在 Chrome 和 Safari 上修复。谢谢你的坚持。干杯，特蕾西