Radio buttons in bootstrap navigation bar - css

Question

I'm trying display some elements positioned in the center (like dropdown list) of nav bar. But my radio buttons doesn't want to get offset. What should I add to my code?
<nav class="navbar navbar-default navbar-fixed-top second-navbar" role="navigation">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li class="container">
<form role="form">
<label class="radio-inline"><input type="radio" name="gr" value="0" onchange="val(this)">Popular first</label>
<label class="radio-inline"><input type="radio" name="gr" value="1" onchange="val(this)">Newest first</label>
</form>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" role="button">
Items per page: <b>#Model.PagingInfo.ItemsPerPage</b>
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>5</li>
<li>10</li>
<li>20</li>
</ul>
</li>
</ul>
</div>
</nav>

Answer 1

You need to add div with class radio. also you need to remove unnecessary tags
<nav class="navbar navbar-default navbar-fixed-top second-navbar" role="navigation">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li class="radio">
<label class="radio-inline">
<input type="radio" name="gr" value="0" onchange="val(this)">Popular first</label>
<label class="radio-inline">
<input type="radio" name="gr" value="1" onchange="val(this)">Newest first</label>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" role="button">
Items per page: <b>#Model.PagingInfo.ItemsPerPage</b>
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>5</li>
<li>10</li>
<li>20</li>
</ul>
</li>
</ul>
</div>
Here is the codepen : http://codepen.io/anon/pen/MKqwgJ

Answer 2

There is slight change in your markup buddy. Just do these listed changes and it will be perfect as you wanted.
1.) remove the class container from your <ul> tag.
2.) To move the radio button to the left, add this bootstrap class to the radio button <li> tag.
<li class="navbar-left">
3.) To move the dropdown to the right, add this bootstrap class to the dropdown <li> tag.
<li class="dropdown navbar-right">
4.) Now for the top spacing, you need to give some padding to the radio button form just like the one dropdown list has.
form {
padding: 10px 15px;
}
Voila ... perfectly aligned ! Here is the JSFiddle