Bootstrap- Navbar切換不顯示

我使用Navbar切換在移動設備上顯示組菜單，但它不工作！問題是什麼？以下是我的代碼和JsFiddle。其實當我給類navbar-toggle按鈕disapear！Bootstrap- Navbar切換不顯示

HTML：

<nav class="navbar" role="navigation"> 
       <div class="navbar-header"> 
        <button class="navbar-toggle" data-toggle="collapse" data-target="#menu"> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
        </button> 
       </div> 
       <ul class="nav navbar-right navbar-nav navbar-collapse collapsed" id="menu"> 
        <li class="active" id="home"><a href="#">Home</a></li> 
        <li><a href="#">Services</a></li> 
        <li><a href="#">About</a></li> 
        <li><a href="#">Tel</a></li> 
       </ul> 
       <img id="logo" src="images/logo.png" class="img-responsive"> 
      </nav>

CSS：

.navbar{ 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    border-bottom: 1px solid #f7f7f7; 
    box-shadow: 0 4px 2px -2px #dedede; 
} 
.navbar-nav > li:first-child > a{ 
    background-color: #01a89e; 
    color: white; 
} 
.navbar-nav > li:first-child a:hover, .navbar-nav > li:first-child a:active { 
    background-color: #01a89e; 
} 
.navbar-nav li a:hover{ 
    background-color: #dedede; 
} 
.navbar-nav{ 
    margin-top: -1px; 
} 
.navbar-nav li:not(:first-child){ 
    border-left: 1px solid #dedede; 
    margin-bottom: -3px; 
} 
.navbar-nav li:hover{ 
    /*border: none;*/ 
} 
.navbar-nav li a{ 
    color: #606060; 
    padding-top: 20px; 
    padding-bottom: 20px; 
    margin-bottom: -3px; 
} 
#logo{ 
    width: 120px; 
}

JsFiddle

來源

2017-06-14 soheil

navbar-default缺少nav元素上的類元素，添加該元素會顯示按鈕並切換，您也可以覆蓋默認顏色，檢出 [JSFiddle]（https://jsfiddle.net/06odccmc/2/） –

@JackRyder非常感謝，但默認情況下，在手機大小菜單沒有摺疊，但我給'ul'標籤''collapsed'類。我該如何解決這個問題？ – soheil

嘗試[this]（https://jsfiddle.net/06odccmc/3/），我把ul放到div中，然後給容器添加了「navbar-collapse collapse」類，默認情況下它會保持摺疊狀態 –

正如@JackRyder說，navbar-default缺少類上nav元素，添加，顯示了按鈕，切換爲好。 JSFiddle

來源

2017-06-29 16:18:55 soheil

Bootstrap- Navbar切換不顯示

回答

相關問題