问题
I have a bootstrap v.3 navbar with 3 elements in it. I would like to align elements evenly so that the search bar is centred in the navbar. And when it collapses that it takes the full widht. But struggling to do that.
This is the html for it:
<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>
I tried to make a fiddle for it, but it didn't turn out good, but hopefully the code there can give some idea.
回答1:
You can achieve the same without flex and CSS3 properties with some simple tweaks.
Check Demo HERE
Try this
HTML:
<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>
CSS:
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;
}
}
回答2:
The class "text-center" in bootstrap 3 is made to align child element to center.
回答3:
Simplest way is to use flex but it has poor browser compatibility, so you can use media queries and position:absolute; for .navbar-form.
Give position-relative to the div .container just inside the nav. I gave it some border, so you can see the centering. Your sign in button is sticking to upper-right corner because you have given it navbar-right class.
.navbar-header img{
width:70px;
margin:0;
}
.navbar-container{
position:relative;
border:1px solid red;
}
.navbar-header button span{
color:black;
background-color:green;
}
@media screen and (min-width:768px){
form.navbar-form{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
margin:0;
}
}<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-transparent navbar-fixed-top" role="navigation">
<div class="container navbar-container">
<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 src="http://www.chinabuddhismencyclopedia.com/en/images/thumb/b/b8/Nature.jpg/240px-Nature.jpg" alt="logo">
</div>
<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">
<input type="text" value="" class="form-control" placeholder="Search...">
<a href="javascript:void(0);"><i class="fa fa-search"></i></a>
</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>来源：https://stackoverflow.com/questions/41647632/css-bootstrap-navbar-center-search-bar-that-takes-the-whole-width-on-collapse