如何摆脱这个水平滚动条

Question

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

提前致谢。

Answer 1

您有两个选择：

完全忽略所有间距:

<style>

body {
    overflow-x:hidden;
}

</style>

或你可以检查你所有的CSS并确保你不会不小心有任何"bleeding"边框或margins/padding.

当您将一个元素的宽度设置为 20% 并且有 5 个这样的元素时，会发生渗色，但随后您添加 10 像素的边距会导致部分运行关闭。

JSFiddle 示例：

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

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

注意：还有很多其他方法可以引起出血。例如，边框等未适当调整。

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

Answer 2

.row.vc_custom_1488973579542（大标题）不是 .container 的直接 child，而是 <section>.

的直接 child

您的主题使用基于 Bootstrap 列的网格布局系统，该系统在 .container 上使用 left/right 填充，并在 left/right 上使用相等的对应 left/right 负边距.row秒。在 full-width 模式下，不将顶级 .row 放置在 .container 中会导致行 25px 大于 <body>，创建水平滚动条。

可能的修复：

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

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

隐藏溢出（不推荐）：

body {
  overflow-x: hidden;
}

如何摆脱这个水平滚动条

How to get rid of this horizontal scroll bar

html

css

scroll

width