chrome 开发者工具的额外右边距答案

【问题标题】：Extra right margin on chrome developer toolschrome 开发者工具的额外右边距
【发布时间】：2016-05-17 15:47:00
【问题描述】：

我对此有点困惑。如果我按原样查看网站，它似乎适合屏幕。当我单击“检查”时，它适合。当我切换“设备模式”时，它也仍然适用。

但是，如果我尝试在设备模式下调整大小或查看不同的屏幕尺寸，则所有尺寸的右侧都会出现空白。它只对http://toqueholistico.com/ 执行此操作。

关于如何解决此问题的任何建议？

编辑：截图

【问题讨论】：

【解决方案1】：

问题是.vc_row 类。它在左右两侧应用负边距，这导致整体溢出。

尝试覆盖它：

.vc_row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

【讨论】：

这并没有解决它。这很奇怪，因为多余的空间不会立即出现。我可以调整响应宽度，前几秒钟还可以，然后如果我在响应模式下选择预定的大小，或者调整它以快速显示空间，之后就再也不会消失了。如果我将鼠标悬停在 body 元素上，则不会选择空白区域...
@CZorio 我通过 Chrome 中的 Inspector 添加了上述规则，它根本不会水平滚动：请参阅 i.imgur.com/kCPzhwA.png 当您在 DevTools 中查看应用的规则时，上述规则是否被某些东西覆盖还有吗？
感谢您的帮助。检查我添加到原始问题的屏幕截图。如您所见，我添加了您的建议，并且相关行的差距仍然存在，问题似乎比这更大......无论如何，顶部的滑块并不局限于 vc 行。在我的屏幕上只能选择一个元素来突出显示整个页面宽度，包括额外的空间……它不是正文、html 或 .container……它是
。跨度>

【解决方案2】：

这个问题帮助我解决了与 Bootstrap 非常相似的问题，也在 Chrome（版本 66.0.3359.139）中。右边距在较小的视口上尤其成问题。我通过使用解决了它：

  .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

【讨论】：