Bootstrap 下拉菜单充当块级元素答案

【问题标题】：Bootstrap drop-down acts as a block-level elementBootstrap 下拉菜单充当块级元素
【发布时间】：2018-04-16 04:21:32
【问题描述】：

下拉菜单换行，下拉菜单不会折叠。它以列表的形式显示自己。 Java 脚本是否有问题。

我正在使用引导程序 v3.3.4 和 jquery v2.1.2。我在 bootstrap.min.js 之前放置了 Jquery 脚本。

<!DOCTYPE html>
<html>

  <head>
    <title>Shaunta's Botique</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <meta name="viewport" content="width=device-width, initial scale=1, user-scalable=" no ">
    <script src="https://code.jquery.com/jquery-2.1.2.min.js "
            integrity="sha256-YE7BKn1ea9jirCHPr/EaW5NxmkZZGb52+ZaD2UKodXY="
            crossorigin=" anonymous "></script>
    <script src="js/bootstrap.min.js "></script>
    <script src="js/tether.min.js "></script>

</head>
<body>
    <!-- Top Nav Bar -->
    <nav class="navbar navbar-default navbar-fixed-top ">
        <div class="container ">
            <a class="navbar-brand " href="index.php ">Shaunta's Botuqie</a></div>
            <ul class="nav navbar-nav ">
                <li class="dropdown ">
                    <a href="# " class="dropdown-toggle " data-toggle="dropdown ">Men <span class="caret "></span></a>
                    <ul class="dopdown-menu " role="menu ">
                        <li><a href=" ">Shirts</a></li>
                        <li><a href=" ">Pants</a></li>
                        <li><a href=" ">Shoes</a></li>
                        <li><a href=" ">Accessories</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </nav>

    <!-- Header -->
    <div id="header-wrapper ">

    </div>

</body>
</html>

【问题讨论】：

标签： jquery twitter-bootstrap css twitter-bootstrap-3

【解决方案1】：

您的代码中有一些拼写错误。类应该是dropdown-menu

<ul class="dopdown-menu " role="menu ">

还缺少一些属性，例如 aria-expanded 和 aria-labelledby。我已经根据 bootstrap documentation 的引用添加了这些属性。

所以最终的标记看起来像-

  <nav class="navbar navbar-default navbar-fixed-top ">
    <div class="container ">
      <a class="navbar-brand" href="index.php ">Shaunta's Botuqie</a></div>
      <ul class="nav navbar-nav">
        <li class="dropdown">
          <a class=" dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
            Men
            <span class="caret"></span>
          </a>
          <ul class="dropdown-menu " role="menu " aria-labelledby="dropdownMenu1">
            <li><a href=" ">Shirts</a></li>
            <li><a href=" ">Pants</a></li>
            <li><a href=" ">Shoes</a></li>
            <li><a href=" ">Accessories</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </nav>

请参考这个工作fiddle。

【讨论】：