我正在使用this引用中的引导导航栏,我正在尝试在移动设备上进行操作,用户无需单击菜单图标即可在页面上搜索。因此,尝试在品牌响应模式之后显示搜索框。
Bootstrap在普通桌面浏览器中看起来像这样:
在响应模式下看起来像这样:
我必须移动该搜索框和登录选项,以便在移动设备上的品牌之后显示在中心。我尝试使用css将搜索框从导航栏中移出,但它将我的整个HTML搞砸了。
有人可以指导我,怎么做? 这是
[JSFiddle Link][4] - https://jsfiddle.net/mzy1sak3/1/
答案 0 :(得分:2)
当我们点击移动设备中的导航栏切换按钮时,会显示导航栏折叠菜单,导航菜单中有默认的导航栏搜索选项。如果不更改引导程序默认行为,则无法更改但是有一个棘手的选择。您可以通过添加名为“hidden-xs”的额外类来隐藏它。然后您可以添加另一个div,使用“visible-xs”类,您可以将该表单放入移动设备。
以下是示例html:
<!-- Navbar -->
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<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="#">Title</a>
<div class="visible-xs">
<form class="navbar-search-sm" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
</form>
<ul class="list-inline navbar-links-sm">
<li><a href="#">Login</a></li>
</ul>
</div>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
<form class="navbar-form navbar-left hidden-xs" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div>
</nav>
<!-- End Navbar -->
你可以像这样自定义css:
.navbar-search-sm{ display: inline-block; margin-top: 8px; }
.navbar-search-sm .form-group{ width: 300px; margin-bottom: 0; }
.navbar-links-sm{ display: inline-block; margin-left: 15px; }
答案 1 :(得分:0)
这是一种方法 使用iPhone 5和5S屏幕分辨率
将ul输入标记和登录div包装在ID为form_login
且低于上述样式的另一个div中
@media screen and (min-width: 320px) and (max-width: 568px) {
#form_login {
position: absolute;
top: 0;
transform: translate(0, 50%);
}
#navbarCollapse {
padding-top: 120px;
}
}
请参阅小提琴here(调整窗口宽度)
您需要为其他设备应用其他媒体规则