在移动视图中单击时菜单未展开答案

【问题标题】：menu not expanding on click in mobile view在移动视图中单击时菜单未展开
【发布时间】：2015-09-17 15:17:46
【问题描述】：

由于某种原因，菜单图标没有在移动视图中展开，不知道我做错了什么。有人可以看看让我知道吗？谢谢！ http://10.60.53.115/staging/sijie/Monster_UX_bootstrap/index.html

HTML：

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container-fluid">
   <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="navbar-collapse">
          <i class="fa fa-bars"></i>
       </button>
        <a href="#" class="navbar-brand"><img class="img-responsive" src="http://media.newjobs.com/homepage/images/Monster_UX/logo.png"></a>
    </div>
    <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav navbar-right hidden-xs">
          <li role="presentation" class="active"><a href="#">About Us</a></li>
          <li role="presentation"><a href="#projects">What We Do</a></li>
          <li role="presentation"><a href="#join">Join the Team</a></li>

          <li class="form">
            <form class="search-container" action="//llamaswill.tumblr.com/search">
                <input id="search-box" type="text" class="search-box" name="q" />
                <label for="search-box"><span class="glyphicon glyphicon-search search-icon"></span></label>
                <input type="submit" id="search-submit"/>
            </form>
            </li>
         </ul>

    </div>
  </div><!--end container-fluid-->

【问题讨论】：

链接可能无法加载，因为它是内部链接。

标签： html css twitter-bootstrap responsive-design

【解决方案1】：

您在导航栏的错误部分设置了 IMG。为了让移动菜单在点击时激活，您需要将 IMG 链接移动到 class="navbar-toggle" 按钮。

.navbar .navbar-header .navbar-toggle {
  padding: 6px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
  <div class="container-fluid">

    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
        <img src="http://placehold.it/40x20/000/000">
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <div class="collapse navbar-collapse" id="navbar">

      <ul class="nav navbar-nav">
        <li class="active"><a href="#">About Us <span class="sr-only">(current)</span></a>
        </li>
        <li><a href="#">What We Do</a>
        </li>
        <li><a href="#">Join the Team</a>
        </li>
      </ul>

      <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>

    </div>

  </div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

【讨论】：