我正在尝试在Bootstrap中创建一个响应式标头,并且在使用移动设备时遇到问题 - 它看起来很适合大型显示器。这是我的布局html代码。我非常感谢你的帮助!图片低于代码。谢谢!!!
<section class="container">
<!--HEADER-->
<div class="row header" >
<div class="col-md-6">
<div class="logo">
<img src="img/logo.png" class="img-responsive" >
<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>
</div><!--/Logo-->
</div>
<div class="col-sm-6 col-lg-6">
<!--Top Utility Links-->
<div class="col-sm-12">
<ul class="utility">
<li><a href="#">Home</a></li>
<li><a href="#">contacts</a></li>
<li><a href="#">Help</a></li>
</ul>
</div><!--/col-sm-12 UTILITY-->
<!--SEARCH-->
<div class="col-md-8 pull-right">
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="q">
<div class="input-group-btn">
<button class="btn btn-default search" type="submit"> <i class="glyphicon glyphicon-search"></i> </button>
</div>
<!--/input-group-btn -->
</div>
<!--/input group -->
</form>
</div><!--/col-sm-8 SEARCH-->
</div>
<!-- <nav class="navbar navbar-default" role="navigation">-->
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right ">
<li><a href="#">ABOUT</a></li>
<li><a href="#">SERVICES</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">HISTORY <b class="caret"></b> </a>
<ul class="dropdown-menu">
<li><a href="#">Link</a></li>
<li><a href="#">Another link</a></li>
<li><a href="#">One More Link</a></li>
</ul>
</li>
</ul>
</div>
<!-- </nav>-->
</div>