Html CSS引导导航栏-居中搜索栏,折叠时占据整个宽度
我有一个引导v.3导航栏,里面有3个元素。我想均匀地对齐元素,以便搜索栏位于导航栏的中心。当它崩溃的时候,它需要完全的寡妇。但在努力做到这一点 这是它的html:Html CSS引导导航栏-居中搜索栏,折叠时占据整个宽度,html,css,twitter-bootstrap,navbar,Html,Css,Twitter Bootstrap,Navbar,我有一个引导v.3导航栏,里面有3个元素。我想均匀地对齐元素,以便搜索栏位于导航栏的中心。当它崩溃的时候,它需要完全的寡妇。但在努力做到这一点 这是它的html: <nav class="navbar navbar-transparent navbar-fixed-top" role="navigation"> <div class="container"> <!-- Brand and toggle get gro
<nav class="navbar navbar-transparent navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="col-lg-4 navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img src="assets/img/logo.png" alt="logo">
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<form class="navbar-form navbar-left navbar-search-form active" role="search">
<div class="form-group">
<input type="text" value="" class="form-control" placeholder="Search...">
</div>
</form>
<ul class="nav navbar-nav">
<li class="active">
<a href="javascript:void(0);"><i class="fa fa-search"></i></a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><button href="#gsdk" class="btn btn-round btn-default">Sign in</button></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
切换导航
-
- 登录
我试着为它做了一个调整,但结果不是很好,但希望那里的代码能给出一些想法。bootstrap 3中的类“text center”用于将子元素与中心对齐 最简单的方法是使用
flex
,但它的浏览器兼容性较差,所以您可以使用媒体查询
和位置:绝对代码>用于.navbar表单
将位置相对于div容器放置在nav
内部。我给了它一些边界,所以你可以看到中心。您的登录
按钮粘在右上角,因为您已将它设置为导航栏右侧
类
.navbar标题img{
宽度:70px;
保证金:0;
}
.导航栏集装箱{
位置:相对位置;
边框:1px纯红;
}
.导航栏标题按钮跨度{
颜色:黑色;
背景颜色:绿色;
}
@媒体屏幕和屏幕(最小宽度:768px){
导航条格式{
位置:绝对位置;
最高:50%;
左:50%;
转换:翻译(-50%,-50%);
保证金:0;
}
}
切换导航
- 登录
通过一些简单的调整,您可以在没有flex和CSS3属性的情况下实现同样的效果
检查演示
试试这个
HTML:
你能添加你的css吗?整个css在小提琴中,但小提琴有整个引导。我说的是你的自定义cssI没有任何自定义CSS你尝试添加“文本中心”类了吗?它应该将子元素与中心对齐。我在你的小提琴上试过了,效果很好。虽然调整大小会使两个元素消失和出现(媒体查询的效果),但它们确实位于中心。
<nav class="navbar navbar-transparent 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="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img class="logo" src="//placehold.it/50x50" alt="logo">
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<form class="navbar-form navbar-search-form active" role="search">
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button"><i class="fa fa-search"></i></button>
</span>
</div>
</div>
</form>
<ul class="nav navbar-nav navbar-right">
<li><button href="#gsdk" class="btn btn-round btn-default">Sign in</button></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
body {
background-color: #ddd;
}
.navbar {
border: 1px solid #ccc;
}
.navbar-toggle .icon-bar {
background-color: #333;
}
.navbar-nav > li {
line-height: 50px;
position: relative;
}
.logo, .navbar-nav > li > .btn {
margin: 0 15px;
}
@media (min-width: 767px) {
.navbar-search-form {
position: absolute;
left: 0;
right: 0;
margin: auto;
width: 100%;
float: none;
text-align: center;
padding: 8px 0;
}
}