这是我的文档的 html,我想在 991 像素以下的屏幕上显示固定的右侧搜索栏,但无法获得正确的代码。下面是详细的代码和链接。
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<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 hidden-xs" href="#">CompAny</a>
<a class="navbar-brand visible-xs" href="#">C</a>
<form class="navbar-form pull-left" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<div class="input-group-btn">
<button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
</div>
</div>
</form>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">Browse Courses</a></li>
<li><a href="#contact">Active Courses</a></li>
</ul>
</div>
<!--/.navbar-collapse -->
</div>
</div>
这里是css
@media(max-width:767px) {
.navbar .navbar-form {
width: 185px;
padding-left:0;
padding-right:0;
}
}
@media(min-width:768px) {
.navbar .navbar-form {
width: 250px;
}
}
.navbar .navbar-form {
padding-top: 0;
padding-bottom: 0;
margin-right: 0;
margin-left: 0;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
我想要实现的功能的参考链接 http://jsfiddle.net/KSCvB/10/。对此的任何帮助将不胜感激。