Bootstrap 3 固定顶部导航栏显示水平滚动

Posted 2023-04-13

【中文标题】Bootstrap 3 固定顶部导航栏显示水平滚动

【英文标题】：Bootstrap 3 fixed top navbar is displaying horizontal scroll

【发布时间】：2014-10-27 06:59:57

【问题描述】：

我正在使用带有移动优先方法的 Bootstrap 3 制作一个固定顶部导航栏。

当我在大屏幕上查看时遇到问题（例如，菜单未折叠），我单击其中一个菜单链接，菜单上出现水平滚动。

问题似乎是在我在导航栏可折叠div 上添加data-toggle="collapse" data-target=".navbar-collapse" 之后发生的，或者我也尝试使用锚链接，以便在单击移动设备中的链接时添加自动关闭查看（小屏幕）。

当我将它用作移动视图（小显示屏）时，它可以完美运行，并且在单击我需要的链接时会自动关闭。

一个例子保存在this plunker，你可以看到。

谁能帮忙去掉那个卷轴？

【问题讨论】：

我想说你不应该像那样添加data-toggle="collapse" data-target=".navbar-collapse"，而应该添加一个自定义点击处理程序。

***.com/questions/21203111/…

【参考方案1】：

感谢您的反馈。

正如@cvrebert 所说，我删除了data-toggle="collapse" data-target=".navbar-collapse，而是添加了以下js：

$(document).on('click.nav', '.navbar-collapse', function (e) if ($(".navbar-header button").is(":visible")) $(this).collapse('hide'); );

这将检查菜单按钮是否可见，如果可见则关闭菜单。

谢谢。