Bootstrap navbar li class =「dropdown」not shown

Question

我已經在我的網站上添加了一個collapse navbar： 這個問題是李類下拉不顯示，當我檢查它，我看到寬度和高度0px，但即使inf我改變它在李未出現檢查...

<nav class="navbar navbar-inverse"> 
     <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> 
     </div> 
     <div class="collapse navbar-collapse" id="myNavbar"> 
      <ul class="nav navbar-nav"> 
      <li class="active"><a href="#home">Accueil</a></li> 
      <li><a href="#service">Le Service</a></li> 
      <li><a href="#portfolio">Notre r&Eacute;seau</a></li> 
      <li><a href="#about">Qui sommes nous?</a></li> 
      <li><a href="#contact">Contact</a></li> 
      <li class="dropdown"> 
       <ul class="dropdown-menu"> 
       <form id="login"> 
        <li><input class="form_login" type="text" id="email" placeholder="e-mail" /></li> 
        <li><input class="form_login" type="password" id="password" placeholder="mot de passe" /></li> 
        <li><button class="form_login" id="submit" value="submit">Submit</button></li> 
       </form> 
       <li><a href="#" style="color: white;">Mot de passe oublié?</a></li> 
       <li><a href="#" style="color: white;">Créer un compte</a></li> 
       <li><a href="#"><span class="icon-facebook"></span></a></li> 
       <li><a href="#"><span class="twitter-square"></span></a></li> 
       <li><a href="#"><span class="google-plus"></span></a></li> 
       </ul> 
      </li> 
      </ul> 
     </div> 
     </div> 
    </nav> 

唯一的CSS是：

.dropdown-menu{ 
    background-color: #181A1C; 
    padding: 3px; 
    border: 1px solid #181A1C; 
} 

Answer 1

你有幾個事情出錯。首先，你沒有設置錨點來觸發下拉菜單。 See the docs。

<li class="dropdown"> 
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Contact <span class="caret"></span></a> 
    <ul class="dropdown-menu"> 

然後，您有無效的列表標記。您不能用表單換行列表項元素。 Here's a demo大部分修復程序已就位。您需要在下拉列表項目內部工作，而不是在附近。如有必要，請使用附加級別的列表。