Bootstrap - 在悬停时添加边框时折叠导航栏错误答案

【问题标题】：Bootstrap - collapse navbar bug when adding a border on hoverBootstrap - 在悬停时添加边框时折叠导航栏错误
【发布时间】：2016-03-20 00:19:09
【问题描述】：

我在悬停时向导航栏 li 添加了一个边框底部，如下所示：

.navbar-default .navbar-nav li a:hover{
    border-bottom: 4px solid #62c4a4;
}

但是，这会导致导航栏折叠显示为带有滚动条的小框，而不是展开列表项。

如何确保导航栏折叠正常展开并且悬停效果的边框仍然显示？

【问题讨论】：

请在代码中添加一个起点（例如 JSFiddle 或 CodePen），以便为您的问题提供适当的解决方案。仅图像无助于解决问题。另见stackoverflow.com/help/mcve
@Roy 现已添加，抱歉。

【解决方案1】：

尝试将height 的.navbar-collapse.collapse.in .navbar-nav 设置为auto，如下所示：

.navbar-collapse.collapse.in .navbar-nav {
  height: auto;
}

因为 Bootstrap CSS 将height 设置为70px，即导航栏的高度。您想在菜单处于活动状态时更改它（将其设置为 auto）。

【讨论】：

【解决方案2】：

我相信这与您将高度设置为 70 像素有关；

.navbar-default, .navbar-nav {
//height: 70px;
}

当您将其注释掉时，您不会看到滚动条。

【讨论】：