html - 导致滚动的宽菜单溢出

Question

以下网站的菜单https://www.thedegreetracker.com/有以下问题。菜单似乎比页面的其余部分更宽。这导致水平滚动条出现在我的浏览器窗口的底部。当一个人滚动(或在非常宽的计算机屏幕上最大化浏览器页面)时，它会导致页面的其他部分(例如横幅和页脚)在您滚动时消失。

相比之下，以下页面没有同样的问题:https://www.thedegreetracker.com/about_us .第二页是我希望第一页在正确调整横幅和页脚大小并且没有水平滚动方面的工作方式。

据我所知，这两个页面之间的 HTML 和 CSS 代码几乎相同。我发现的差异似乎没有什么不同。我花了几个小时试图弄清楚是什么导致了这个问题，我现在要求重新审视。我正在使用 Bootstrap 3 和 Laravel，物有所值。

我希望这是一个我所缺少的简单修复。您可能会更幸运地在实际网页上使用 Chrome 开发工具来解决这个问题，但下面是两个页面的 HTML。据我所知，两个页面的 CSS 完全相同。

这是带有宽菜单和水平滚动的损坏页面的代码

view-source:https://www.thedegreetracker.com/login

这是来自页面的代码，其中包含正常工作的菜单、横幅和页脚

view-source:https://www.thedegreetracker.com/about_us

Answer 1

问题出在表单中，而不是菜单中。您在表单中错误地使用了 container 类(由 Bootstrap 保留用于设置页面宽度)。

此外，您的表单有一个 .container 类，但您正在覆盖 max-width 属性。这可能会导致响应问题。尽量不要在框架用于设置内容和布局宽度的类上触摸 width、max-width 和 min-width，在一般的。如果必须，请使用内容器。

回到您的问题，您可能根本不应该为表单内的容器 使用任何类。根据经验，尽量使用不与框架的类名冲突的类名。

要解决您的问题，请从您的表单中删除 container，或者作为此类错误的一般补丁，添加此 CSS:

.container .container {
    width: initial;
}