我使用引导程序将下面给出的代码用于我的“home.html”。
但通过移动设备浏览网站时，搜索栏及其上的所有内容都不会显示。
请帮忙解决！谢谢！
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigationbar">
<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="/">Get Started</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 navbar-right">
<li>
<form class="navbar-form navbar-left" role="search" action="/search/" method="GET" id="search" autocomplete="off">
<div class="form-group">
<input type="text" class="form-control" placeholder="Select what to search for" name="query" width="100px">
<select name="drop" class="form-control" width="20">
<option value="1"> Assigns</option>
<option value="2"> Subjects(Tutorials)</option>
<option value="3"> Subjects(Papers)</option>
</select>
</div>
<button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
</form>
</li>
<li>
<a href="#home">Home</a>
</li>
<li>
<a href="#about">About</a>
</li>
<li>
<a href="#contact">Contact us</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
导航栏折叠时出现的按钮有其data-target指向不存在的元素 id (#navigationbar)。将其指向折叠元素 (#bs-example-navbar-collapse-1)。
...
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
...
实例：http://www.bootply.com/Xn2oJQYhih http://www.bootply.com/Xn2oJQYhih
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
