Jquery 如何在引导中自定义折叠菜单

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

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

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

2） 李元素在平板电脑上看起来很糟糕。它们仍然在线显示，并撞到页面左角的徽标（这是在我的codeply链接中看不到的图像）

我基本上想知道如何定制折叠菜单或垂直菜单，但我似乎找不到太多关于这个主题的内容。这是一个代码层，所以你可以看到我在说什么

---

发生这些问题的原因是，您正在使用

css

触发

991px

及以下版本上的切换菜单，默认情况下，在

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） 李元素在平板电脑上看起来很糟糕。它们仍然在线显示，并撞到页面左角的徽标（这是在我的codeply链接中看不到的图像）

在媒体查询中组合

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

---

我的英雄！谢谢你，伙计。@ThomasMcNish酷！很乐意帮忙。