Css 引导导航栏中的单选按钮

我正在尝试显示一些位于导航栏中心（如下拉列表）的元素。但我的单选按钮不想偏移。我应该在代码中添加什么

<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>

流行第一
最新第一

---

您需要在class radio中添加div。您还需要删除不必要的标记

<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>

流行第一
最新第一

---

这是代码笔：

您的标记有细微的变化。只要做这些列出的更改，它就会像你想要的那样完美

1.）从

标签中删除类

容器

2.）要向左移动单选按钮，请将此引导类添加到单选按钮标签中


3.）若要向右移动下拉列表，请将此引导类添加到下拉列表标签中


4.）现在，对于顶部间距，您需要给单选按钮窗体添加一些填充，就像下拉列表一样

form {
  padding: 10px 15px;
}

瞧。。。完全对齐！这是您想要中间的下拉列表？@UbiquitousDevelopers否我想要单选按钮组的顶部填充，就像下拉列表一样。@UbiquitousDevelopers将所有元素设置在一行中。从li中删除类“container”并覆盖“padding top on”。.navbar nav>li>a'为0。它将使所有元素一致。谢谢回答！但第一个解决方案对我来说更好，因为我有一个以上的导航栏。不用担心。很高兴你得到了你需要的帮助。