jquery - Bootstrap 导航问题

Question

好吧，我对 Bootstrap 还很陌生，我一直在写一些代码，我偶然发现了我在移动设备上的导航问题。

无论我做什么，一旦您单击 3 格按钮，移动设备上的导航似乎就会崩溃...

<header class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <a href="#" class="navbar-brand">Media Company</a>
    <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
    <nav class="collapse navbar-collapse navHeaderCollapse">
      <ul class="nav navbar-nav navbar-right">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Hire us</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>

  </div>
</header>

示例代码 https://jsfiddle.net/ed8o8vuz/

Answer 1

这可能正是您所期待的。如果没有，请对问题进行更多评论。

nav {
  width: 100%;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<header class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <a href="#" class="navbar-brand">Media Company</a>
    <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
    <nav class="collapse navbar-collapse navHeaderCollapse">
      <ul class="nav navbar-nav navbar-right">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Hire us</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>

  </div>
</header>