Question

我在我的网站上添加了折叠导航栏：问题是li类下拉列表没有显示，当我检查它时，我看到宽度和高度为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 ，其中包含大部分修复程序。您需要在下拉列表项中处理表单，而不是在其周围。如有必要，请使用其他级别的列表。

Bootstrap navbar li class =“dropdown”未显示

1 个答案: