jquery - 如何在 Bootstrap 中自定义折叠菜单

Question

所以我有一个用 Bootstrap 制作的导航栏。我在悬停菜单元素下方使用了边框，因此当您将鼠标悬停在菜单项上方时，您会得到一条线出现在菜单项下方的效果。但是我的菜单的折叠版本有几个问题。

1) 边框不会在我的垂直折叠菜单中消失。看起来很可笑。

2) li 元素在平板电脑上看起来很糟糕。它们仍然在线显示，并且撞到页面左 Angular 的 Logo (这是我的代码链接中看不到的图像)。

我基本上想知道如何自定义折叠菜单或垂直菜单，但我似乎找不到太多关于这个主题的信息。这是一个 codeply，所以你可以明白我在说什么。

http://www.codeply.com/go/TI1k70CPFm

Answer 1

出现问题是因为您使用 css 在 991px 及以下触发切换菜单，其中默认情况下 Bootstrap 切换菜单在 767px 和下面。

要解决这个问题，我们需要将自定义样式设置为在 991px 及以下期间也能正常工作。

1) 边框不会在我的垂直折叠菜单中消失。看起来很可笑。

@media (max-width: 991px) {
    .navbar-default .navbar-nav > li > a:hover::after,
    .navbar-default .navbar-nav > li > a:focus::after {
        display: none;
    }
}    

2) li 元素在平板电脑上看起来很糟糕。它们仍然在线显示，并且撞到页面左 Angular 的 Logo (这是我的代码链接中看不到的图像)。

@media (max-width: 991px) {
  .navbar-nav {
    margin: 7.5px -15px;
    width: 100%;
    float: none !important;
  }

  .nav>li {
    position: relative;
    display: block;
    float: none;
  }
} 

在媒体查询中放在一起 max 991px

@media (max-width: 991px) {
  .navbar-nav {
    margin: 7.5px -15px;
    width: 100%;
    float: none !important;
  }

  .nav>li {
    position: relative;
    display: block;
    float: none;
  }
  .navbar-default .navbar-nav > li > a:hover::after,
  .navbar-default .navbar-nav > li > a:focus::after {
    display: none;
  }
} 

Codeply