如何在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