如何摆脱这个水平滚动条答案

【问题标题】：How to get rid of this horizontal scroll bar如何摆脱这个水平滚动条
【发布时间】：2017-08-02 06:33:15
【问题描述】：

对于我的生活，我似乎无法摆脱this site 底部的水平滚动条。我已经尝试了一切（在我的能力范围内）并且想知道是否有人可以为我阐明它。

提前致谢。

【问题讨论】：

作为一个非常基本的答案，您可以将overflow-x: hidden 设置为body 标签。虽然我建议尝试确定为什么元素的宽度总是大于窗口...
谢谢你，我会破解的。我一天中的大部分时间都在试图找出是什么破坏了它，但我找不到问题。
编辑：这行得通，但我会放弃它，看看是否有人能找到问题。再次感谢。

标签： html css scroll width

【解决方案1】：

你有两个选择：

忽略所有的间距：

<style>

body {
    overflow-x:hidden;
}

</style>

或者您可以检查所有的 CSS，并确保您不会意外出现任何“出血”边框或边距/填充。

当您将元素的宽度设置为 20% 并且其中有 5 个元素时，会发生出血，但随后添加 10px 的边距会导致部分元素流失。

JSFiddle 示例：

https://jsfiddle.net/nfnneil/9dcdurnj/4/

你注意到第四个元素在第二行吗？这是因为边距发生在样式对象之外。

注意：还有很多其他方式会导致出血。比如，没有适当调整的边框等。

我个人会选择overflow-x:hidden，但那是因为我很懒。但是，通过使用惰性方式 overflow-x:hidden，您可能会影响代码的某些未来用途。话虽如此，我认为您应该只使用我们overflow-x:hidden。

【讨论】：

【解决方案2】：

.row.vc_custom_1488973579542（带有大标题的那个）不是.container 的直系子代，而是<section> 的直系子代。

您的主题使用基于 Bootstrap 列的网格布局系统，该系统在 .containers 上使用左/右填充，在 .rows 上使用相应的左/右负边距。在全角模式下，不在.container 中放置顶级.rows 会导致25px 大于<body> 的行，从而创建一个水平滚动条。

可能的修复：

将此.row 放在.container 中（推荐）
为其覆盖默认行边距：

.row.vc_custom_1488973579542 { 
  margin-left:0;
  margin-right:0; 
}

隐藏溢出（不推荐）：

body {
  overflow-x: hidden;
}

【讨论】：

非常感谢。两者都有效，但与推荐的一致。再次感谢。