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

Question

因此，我使用Bootstrap制作了一个导航栏。我在悬停菜单元素下使用了一个边框，因此当您将鼠标悬停在菜单项下时，您会看到一行出现在菜单项下方的效果。但是我的菜单崩溃版本遇到了一些问题。

1）边框不会在我的垂直折叠菜单中消失。它看起来很荒谬。

2）li元素在平板电脑上看起来很糟糕。它们仍然在线显示，并且它们碰到页面左角的徽标（这是在我的代码链接中无法看到的图像）。

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

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

Answer 1

的问题发生，因为是触发991px及以下使用css其中默认引导切换菜单切换菜单时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元素在平板电脑上看起来很低劣。它们仍然在线显示，并且它们碰到页面左角的徽标（这是在我的代码链接中无法看到的图像）。

@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