移动设备上的Bootstrap导航标题菜单崩溃

Question

由于class="collapse navbar-collapse"（我的假设是正确的吗？），当使用屏幕较小的设备时，我的菜单会隐藏。

但是如何获得某种按钮，用户可以选择此菜单中的任何项目？

JSFiddle

Answer 1

＆＃13;

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
  <nav class="navbar navbar-default navbar-fixed-top">
	  <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">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
	      <a class="navbar-brand" href="https://en.wikipedia.org/wiki/International_Organization_for_Standardization" target="_blank"><img src="https://iso.torza.nl/images/iso-logo.png" height="30"></a>
	    </div>

		    <!-- Collect the nav links, forms, and other content for toggling -->
		    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
		      <ul class="nav navbar-nav">
		        <li><a href="#">Klanttevredenheid</a></li>
		        <li><a href="#">Leveranciersbeoord.</a></li>
		        <li><a href="#">Afwijkingen.</a></li>
		        <li><a href="toolbox.php">Toolboxen</a></li>
		        <li><a href="werkplek.php">Werkplekinspec.</a></li>
		        <li><a href="#">Ongevallen</a></li>
		        <li><a href="#">Functioneringsgesprekken</a></li>
		        <li><a href="#">Verbeterpunten</a></li>
		      </ul>
		      <form class="navbar-form navbar-right" action="" method="get">
		        <div class="form-group">
		          <input type="text" class="form-control" placeholder="Zoeken op" name="zoek" value="zoek" >
		        </div>
		        <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
		      </form>

	    </div><!-- /.navbar-collapse -->
	  </div><!-- /.container-fluid -->
	</nav>

＆＃13;

＆＃13;

＆＃13;

你错过了这个导航按钮控件

 <button type="button" class="navbar-toggle" 
                  data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>

我更新了你的小提琴check here

Answer 2

只需替换以下

where

用这个

<div class="navbar-header">
<a class="navbar-brand" href="https://en.wikipedia.org/wiki/International_Organization_for_Standardization" target="_blank"><img src="https://iso.torza.nl/images/iso-logo.png" height="30"></a>
</div>