1
由于class="collapse navbar-collapse"
(我的假设是否正确?)我的菜单在使用屏幕较小的设备时隐藏。移动设备上的自举导航头菜单折叠
但是如何获得某种按钮,用户可以选择该菜单中的任何项目?
由于class="collapse navbar-collapse"
(我的假设是否正确?)我的菜单在使用屏幕较小的设备时隐藏。移动设备上的自举导航头菜单折叠
但是如何获得某种按钮,用户可以选择该菜单中的任何项目?
<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">
\t <div class="container-fluid">
\t <!-- Brand and toggle get grouped for better mobile display -->
\t <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>
\t <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>
\t </div>
\t \t <!-- Collect the nav links, forms, and other content for toggling -->
\t \t <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
\t \t <ul class="nav navbar-nav">
\t \t <li><a href="#">Klanttevredenheid</a></li>
\t \t <li><a href="#">Leveranciersbeoord.</a></li>
\t \t <li><a href="#">Afwijkingen.</a></li>
\t \t <li><a href="toolbox.php">Toolboxen</a></li>
\t \t <li><a href="werkplek.php">Werkplekinspec.</a></li>
\t \t <li><a href="#">Ongevallen</a></li>
\t \t <li><a href="#">Functioneringsgesprekken</a></li>
\t \t <li><a href="#">Verbeterpunten</a></li>
\t \t </ul>
\t \t <form class="navbar-form navbar-right" action="" method="get">
\t \t <div class="form-group">
\t \t <input type="text" class="form-control" placeholder="Zoeken op" name="zoek" value="zoek" >
\t \t </div>
\t \t <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
\t \t </form>
\t </div><!-- /.navbar-collapse -->
\t </div><!-- /.container-fluid -->
\t </nav>
你错过这个导航键控制
<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
只需更换以下
<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>
与此
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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>
太好了!谢谢。你知道是否有一种方法可以将另外两个项目添加到下拉菜单中,但不在标准头文件中? – Muiter
是的,我们可以添加,但我可以清楚知道你想要什么类型的菜单 –
菜单的类型是完美的,我需要在下拉菜单中看到一个额外的菜单项,而不是在标准菜单中: