Javascript 当显示移动窗口时,引导导航栏中是否有搜索栏?
我试图让搜索栏停留在navbar品牌标志旁边的顶部,但每次我在屏幕上达到768像素时,搜索栏就会转到底部,我想让搜索栏与navbar品牌处于同一级别,但还无法实现,下面是我正在使用的代码Javascript 当显示移动窗口时,引导导航栏中是否有搜索栏?,javascript,jquery,css,twitter-bootstrap,modal-dialog,Javascript,Jquery,Css,Twitter Bootstrap,Modal Dialog,我试图让搜索栏停留在navbar品牌标志旁边的顶部,但每次我在屏幕上达到768像素时,搜索栏就会转到底部,我想让搜索栏与navbar品牌处于同一级别,但还无法实现,下面是我正在使用的代码 <nav class="navbar navbar-inverse navbar-fixed-top navColor"> <div class="container-fluid"> <div class="navbar-header"&
<nav class="navbar navbar-inverse navbar-fixed-top navColor">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">
<img src="img/Logo.png" alt="" class="navLogo">
</a>
</div>
<!--navbar-header-->
<div class="col-sm-8 col-md-8 navbar-left">
<form class="navbar-form" role="search">
<div class="input-group barraBuscar">
<input type="text" class="form-control" placeholder="Buscar" name="q">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i>
</button>
</div>
</div>
</form>
</div>
<div class="col-sm-3 navbar-right">
<div id="navbar" class="navbar-collapse collapse">
<ul id="menu" class="navbar-nav" style=" list-style-type: none;">
<li>
<a href="#"> <i class="fa fa-star-o fa-2x iconos" data-toggle="tooltip" data-placement="bottom" title="Promociones"></i>
</a>
<a href="#"> <i class="fa fa-play-circle-o fa-2x iconos" data-toggle="tooltip" data-placement="bottom" title="Videos"></i>
</a>
<a href="#"> <i class="fa fa-camera fa-2x iconos" data-toggle="tooltip" data-placement="bottom" title="Galeria"></i>
</a>
<a href="#"> <i class="fa fa-comments-o fa-2x iconos" data-toggle="tooltip" data-placement="bottom" title="Notificaciones"></i>
</a>
<a href="#"> <i class="fa fa-clipboard fa-2x iconos" data-toggle="tooltip" data-placement="bottom" title="Publicaciones"></i>
</a>
<a href="#"> <i class="fa fa-briefcase fa-2x iconos" data-toggle="tooltip" data-placement="bottom" title="Bolsa de trabajo"></i>
</a>
</li>
</ul>
</div>
</div>
<!--/.navbar-collapse -->
</div> <!--container-fluid-->
</nav>
您应该使用显示/隐藏引导块。我的意思是改变页面导航栏在不同大小屏幕上的显示
.navColor{
background-color: #1d88c5 !important;
border-color: #1d88c5 !important;
}
.navLogo {
max-width:30px;
}
.barraBuscar{
width: 100% !important;
}