bootstrap 导航栏中的单选按钮

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

您需要添加 div 和 class 收音机。你还需要删除不必要的标签

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

这是代码笔：http://codepen.io/anon/pen/MKqwgJ

Answer 2

您的标记伙伴略有变化。只需进行这些列出的更改，它就会完美如您所愿。

1.) 从您的 <ul> 标签中删除 class container。

2.) 要将单选按钮向左移动，请将此 bootstrap class 添加到单选按钮 <li> 标记。

<li class="navbar-left">

3.) 要将下拉列表向右移动，请将此 bootstrap class 添加到下拉列表 <li> 标记中。

<li class="dropdown navbar-right">

4.) 现在对于顶部间距，你需要给单选按钮表单一些填充，就像一个下拉列表一样。

form {
  padding: 10px 15px;
}

瞧……完美对齐！这是 JSFiddle

bootstrap 导航栏中的单选按钮

Radio buttons in bootstrap navigation bar

html

css

radio-button

navigationbar

twitter-bootstrap