宽菜单溢出导致滚动

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;
}