Question

这是我的HTML代码。我正在尝试创建一个导航栏但是下拉按钮不起作用。哪种方法最有效？

      <nav class='navbar navbar-inverse navbar-fixed-top'>
          <div class='container'>
            <div class='navbar-header'>
              <button type='button' class='navbar-toggle collapsed' data-toggle='collapse' data-target='#navbar' aria-expanded='false' aria-controls='navbar'>
                <span class='sr-only'>Toggle navigation</span>
                <span class='icon-bar'></span>
                <span class='icon-bar'></span>
                <span class='icon-bar'></span>
              </button>
              <a class='navbar-brand' href='#'>Hello</a>
            </div>
            <div id='navbar' class='navbar-collapse collapse'>
              <ul class='nav navbar-nav'>
                <li class='active'><a href='#'>Project</a></li>
              </ul>
                   <ul class="nav navbar-nav navbar-right">
                   <li class="dropdown">

                         <li><a class="dropdown-toggle" data-toggle="dropdown" href="#"><span class="glyphicon glyphicon-user"></span> Sign Up <span class="caret"></span></a></li>
                               <ul class="dropdown-menu">
                                     <li><a href="#">Log off</a></li>
                               </ul>

                    </li>
                    </ul>
             </div>     

        </nav>

Answer 1

如果您已经下载了Bootstrap，那么您将在js文件夹中找到bootstrap.min.js，这必须在您的文档头中，以便某些Bootstrap组件（如导航栏下拉列表）正常运行。

下载：http://getbootstrap.com/getting-started/#download

如果您使用的是CDN（托管的Bootstrap文件），则可能需要在文档头中粘贴这些行。

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

Answer 2

请尝试以下代码：

<ul class="nav navbar-nav navbar-right">
    <div class="dropdown">
        <button class="dropdown-toggle" type="button" data-toggle="dropdown" 
            href="#">
            <span class="glyphicon glyphicon-user"></span> Sign Up <span 
            class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li><a href="#">Log off</a></li>
        </ul>
    </div>
</ul>

HTML下拉列表但不起作用-navbar

2 个答案: