自舉導航欄中的單選按鈕

Question

我試圖顯示位於導航欄中心（如下拉列表）中的一些元素。但我的單選按鈕不想要抵消。我應該添加到我的代碼？

<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><a href="#">5</a></li> 
        <li><a href="#">10</a></li> 
        <li><a href="#">20</a></li> 
       </ul> 
      </li> 
     </ul> 
    </div> 
</nav> 

Answer 1

你需要用類無線電增加股利。你也需要刪除不必要的標籤

<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><a href="#">5</a></li> 
     <li><a href="#">10</a></li> 
     <li><a href="#">20</a></li> 
     </ul> 
    </li> 
    </ul> 
</div> 

這裏是codepen：http://codepen.io/anon/pen/MKqwgJ

Answer 2

有一個在你的標記好友略有變化。只要做這些列出的變化，它會是你想要的完美。

1.）從您的<ul>標記中刪除類別container。

2.）要將單選按鈕向左移動，請將此引導類添加到單選按鈕<li>標記。

<li class="navbar-left">

3）要下拉向右移動，自舉類添加到下拉<li>標籤。

<li class="dropdown navbar-right">

4）現在的頂部空間，你需要給一些填充的單選按鈕形式就像一個下拉列表中了。

form { 
    padding: 10px 15px; 
} 

瞧......完美對齊！這裏是JSFiddle