I'm trying to use navbar-right on a navbar-form and a navbar-nav, but the form ends up on one row and the nav links on another row on the right. How can I make the navbar display the brand on the left and have a search field followed by nav links on the right?
<nav class="navbar navbar-inverse" role="navigation">
<div class="container-fluid col-sm-12 col-lg-offset-2 col-lg-8">
<!-- 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_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="/" style="white-space:nowrap">Site</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar_collapse">
<div class="navbar-right">
<form class="navbar-form" role="search" ng-submit="collectionSearch()">
<div class="form-group">
<input type="text" class="form-control" placeholder="Collection ID"
ng-model="cSearch" size=10 required>
</div>
</form>
<ul class="nav navbar-nav">
<li id="create_tab"><a href="/">Create</a></li>
<li id="tests_tab"><a href="#/tests">Tests</a></li>
<li id="collections_tab"><a href="#/collections">Collections</a></li>
<li id="account_tab"><a href="#/account">Account</a></li>
<li id="logout_tab" ><a href="#">Logout</a></li>
</ul>
</div>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
If you have any tips or suggestions, please let me know. Thank you!