How to get bootstrap html elements positioned on a single line
Question
I'd like to create a site header like the one on stackoverflow..
I am using bootstrap but can't seem to get the header elements to appear on a single line.
Anyone have any ideas how I can achieve this?
Here is the jsfiddle - https://jsfiddle.net/31wxk9ak/2/ . depending on the size of your screen you may need to adjust the page split on this page in order to prevent you browser from stacking the elements.
Here is the code:
<html><head></head><body>
<div id="root">
<div data-reactroot="" class="container fill">
<nav class="navbar navbar-default">
<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="/">Home</a></div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a title="About" href="/about">About</a></li>
<li><a title="Contact" href="/contact">Contact</a></li>
<li>
<div class="row">
<div class="col-lg-6 col-md-6">
<div class="input-group"><input type="text" class="form-control"
placeholder="Search..."
value=""><span class="input-group-btn"><input
type="button" class="btn btn-default" value="Go!"></span></div>
</div>
</div>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li id="nav-login-btn"><a title="Login" class="animate" href="/login">Login</a></li>
<li id="nav-login-btn"><a title="Register" class="animate" href="/register">Register</a></li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<link rel="stylesheet" href="assets/lib/bootstrap/3.3.7/css/bootstrap.min.css">
https://oss.maxcdn.com/respond/1.4.2/respond.min.js'>
2 answers
solution1
0 ACCPTED 2017-09-26 19:43:06
You are not implementing the navbar properly, use a form for the search box.
<ul class="nav navbar-nav navbar-right">
<li>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</li>
<li id="nav-login-btn"><a title="Login" class="animate" href="/login">Login</a></li>
<li id="nav-login-btn"><a title="Register" class="animate" href="/register">Register</a></li>
</ul>
Reference:
solution2
0 2017-09-26 19:45:13
There's obviously many ways to do this, but I'll just show a couple. The first one uses floating, simply apply this to all navbar headers.
.navBarHeader {
float: left;
}
Alternately, you can use inline-block.
.navBarHeader {
display: inline-block;
}
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.