Bootstrap導航欄摺疊切換顯示單條黑線代替菜單

我有一個很大的問題，試圖讓我的引導菜單項在摺疊時顯示菜單項。我搜遍了這個網站，並沒有找到任何有效的工具。我可以找到的任何事情都會談到jquery或bootstrap版本沒有正確實現，或者摺疊按鈕是不可見的。從修補它，我已經發現問題是我的自定義CSS弄糟引導CSS，但我不能爲我的生活弄清楚要改變什麼來解決它。任何幫助，非常感激。這裏是我的代碼。Bootstrap導航欄摺疊切換顯示單條黑線代替菜單

HTML

<!DOCTYPE html> 
<html lang="en"> 

<head> 

    <!--Meta --> 
    <title>Navbar</title> 

    <meta charset="utf-8"> 

    <meta name="viewport" content="width=device-width, initial-scale=1"> 

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 

    <link href='https://fonts.googleapis.com/css?family=Montserrat:700,400' rel='stylesheet' type='text/css'> 


    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> 

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
<!--Meta--> 
</head> 
<body> 
<nav class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <h1 class ="navbar-brand">Navbar</h1> 
    </div> 
     <div class="collapse navbar-collapse" id ="myNavbar"> 
     <ul class="nav navbar-nav navbar-left"> 
     <li><a href="#homey">Home</a></li> 
     <li><a href="#abou">About</a></li> 
     <li><a href="#porty">Portfolio</a></li> 
     <li><a href="#conty">Contact</a></li> 
     </ul> 
     </div> 
    </div> 

</nav> 
    </body> 
</html>

CSS

.navbar { 
    height: 125px; 
} 
.navbar-brand { 
    position: relative!important; 
    left: 100px!important; 
    bottom: 10px!important; 
    font-size: 4em!important; 
    color: white!important; 
    font-family: 'Montserrat', sans-serif; 
} 

.nav.navbar-nav.navbar-left li a { 
    color: white; 
    position: relative; 
    right: 175px; 
    top: 66px; 
    font-family: 'Montserrat', serif; 
} 

.nav.navbar-nav.navbar-left li a:hover { 
    color: orange; 
} 

.navbar-collapse.collapse { 
    display: none !important; 
} 



@media (max-width: 990px) { 
    .navbar-header { 
    float: none !important; 
    } 
    .navbar-toggle { 
    display: block !important; 
    } 
    .navbar-collapse.collapse { 
    display: none !important; 
    } 
    .navbar-nav { 
    float: none !important; 
    margin: 7.5px -15px; 
    } 
} 

@media screen and (max-width: 768px) { 
    .navbar-brand { 
    font-size: 40px !important; 
    position: relative !important; 
    top: -20px !important; 
    left: -10px !important; 
    } 
    .navbar { 
    height: 70px; 
    } 
} 

@media screen and (max-width: 568px) { 
    .navbar-brand { 
    font-size: 30px !important; 
    position: relative !important; 
    bottom: 20px !important; 
    left: -3px !important; 
    !important; 
    } 
    .navbar { 
    height: 50px; 
    } 
} 

@media screen and (max-width: 420px) { 
    .navbar-brand { 
    font-size: 25px !important; 
    } 
} 

@media screen and (max-width: 365px) { 
    .navbar-brand { 
    font-size: 20px !important; 
    } 
} 

@media screen and (max-width: 275px) { 
    .navbar-brand { 
    font-size: 15px !important; 
    } 
}

下面是一個代碼筆：Navbar

來源

2016-04-27 kgoode517

嗯，我在你的媒體查詢中看到很多'display：none'，還有更多'！important'被調用。你應該避免像瘟疫一樣調用'！important'，並學習如何覆蓋Bootstrap的css，或者使用特定的標識符。 –

感謝您的建議，我會看到我可以改變。 – kgoode517

因爲你.nav.navbar-nav.navbar-left li a {}實際上其定位關閉屏幕移動視圖和它的當顏色是白色的，你無法看到它。

因此，當您的窗口進入手機尺寸時，我明確地刪除了您的位置和顏色。另外，注意到我已將下面的display:none註釋掉。這應該有助於你重新思考你的CSS。在移動視圖中，除非您爲標記指定不同的CSS，否則它將使用您之前指定的那個。試着把它粘貼在你的上面，然後調整它以滿足你的需要。 :)

@media (max-width: 990px) { 
    .navbar-header { 
    float: none !important; 
    } 

    .nav.navbar-nav.navbar-left li a { 
     color: black; 
     right: 0px; 
     top: 0px; 
    } 
    .navbar-nav { 
    float: none !important; 
    margin: 7.5px -15px; 
    } 
}

來源

2016-04-28 00:44:21 MrWitts

這使得很多的意義，我已經試過你的解決方案。然而，當我嘗試你的代碼時會發生什麼，菜單隻會出現其他點擊，並且一次只能顯示幾個部分。任何想法爲什麼？ – kgoode517

我真的不明白你的問題。「一次點擊其他點擊，僅限於幾個部分，你的意思是什麼？」？ – MrWitts

我想我想通了你想說什麼。你忘了「註釋」出「navbar-toggle」和「navbar-collapse」嗎？只要刪除它，如果你沒有。我編輯了上面的答案。 – MrWitts

Bootstrap導航欄摺疊切換顯示單條黑線代替菜單

回答

相關問題