I'm encountering issues keeping all 3 components of the Bootstrap-based navbar
in one horizontal row. This navbar has fluid width .
Question: How can we tweak the code to get all the 3 items (from left to right: a
, form
and ul
) to be arrange in one line? The form
should take 100% of the space remaining betweem the orange color a
and the Login/Signup ul
.
Bootply: http://www.bootply.com/oEkHN0DVmE
Currently
Desired
HTML
<nav class="navbar navbar-default navbar-fixed-top">
<a class="brand" href="#">
<img src="/img/logo-white.png">
</a>
<form role="form" class="form-horizontal search-form">
<!-- <i class="fa fa-search"></i> -->
<input type="text" class="form-control" placeholder="Search">
</form>
<ul class="nav navbar-nav pull-right">
<li><a href="/users/sign_in">Login</a></li>
<li><a href="/users/sign_up">Sign up</a></li>
</ul>
</nav>
CSS
.brand {
width: 170px;
height: 80px;
background-color: #fc4310;
display: inline-block
}
.search-form {
width: 100%;
height: 30px;
display: inline-block;
}
Very simply:
nav { display: flex; }
That aligns all nav child elements in a single row.
For spacing the elements on the row, see options here: Methods for Aligning Flex Items
Note that flexbox is supported by all major browsers, except IE 8 & 9 . Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes . For a quick way to add all the prefixes you need, post your CSS in the left panel here: Autoprefixer .
Did some changes to your code...
I hope this will help you..
refer this demo
added navigation header
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapsible">
<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="//placehold.it/100x50"></a>
</div>
and change the form little bit with css
<form class="navbar-form">
<div class="form-group" style="display:inline;">
<div class="fill">
<input type="text" class="form-control" placeholder="Search"><span class="btn"></span>
</div>
</div>
.fill {
position: relative;
display: table;
border-collapse: separate;
}
.fill .form-control {
width: 100%;
margin-bottom: 0;
display: inline-block;
}
.fill .btn {
white-space:nowrap;
width:1%;
display: table-cell;
}
.navbar-brand{
padding:0;
margin-right:15px;
}
Use the gird sistem:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="col-lg-2">
<a class="brand" href="#">
<img src="/img/logo-white.png">
</a>
</div>
<div class="col-lg-8">
<form role="form" class="form-horizontal search-form">
<!-- <i class="fa fa-search"></i> -->
<input type="text" class="form-control" placeholder="Search">
</form>
</div>
<div class="col-lg-2">
<ul class="nav navbar-nav pull-right">
<li><a href="/users/sign_in">Login</a></li>
<li><a href="/users/sign_up">Sign up</a></li>
</ul>
</div>
</nav>
Change some css
.search-form {
width: 83%;
height: 30px;
display: inline-block;
}
.search-form input{margin-top:35px}
.nav.navbar-nav{margin-top:25px;}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.