保持折叠的导航栏重新排序拉右元素？

Question

我有以下代码（full source of page）：

<div class="navbar">
<div class="navbar-inner">
<div class="container">

  <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
  <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </a>

  <!-- Be sure to leave the brand out there if you want it shown -->
  <span class="brand" href="#">Test</span>


  <!-- Everything you want hidden at 940px or less, place within here -->
  <div class="nav-collapse collapse">
   <ul class="nav">
     <li class="{% active request "^/$" %}"><a href="#">Home</a></li>
     <li class="{% active request "^/about$" %}"><a href="#">About</a></li>
   </ul>


    <form class="navbar-search pull-right">
      <input type="text" class="search-query" placeholder="Search...">
    </form>
    <div class="navbar-form pull-right">
     <a href="{% url "login" %}" class="btn">Log in</a>
     <a href="#" class="btn btn-primary">Sign up</a>
    </div>
  </div>
  </div>

    <!-- .nav, .navbar-search, .navbar-form, etc -->
  </div>
</div>

当作为桌面加载时，我得到这个： 请注意，“登录”和“注册”按钮位于搜索栏之前。

但是，当我调整浏览器大小并且导航栏响应时，我得到了这个：

现在，“登录”和“注册”按钮位于搜索栏之后。这是因为它们是拉右元素。

我尝试在float: right父div中包装按钮和搜索栏。这导致他们保持正确的顺序，但导致他们奇怪地偏向一边。这是不可取的。有没有人有一个解决方案导致他们的命令不被撤销？

Answer 1

问题是navbar-form和navbar-search上的浮动在nav-collapse逻辑开始后设置为无。而不是依赖浮点数，请使用display: inline-block 。以下似乎合理地工作（您应该创建自己的类而不是内联应用样式）：

    <div class="pull-right">
    <!-- .btn's already have display: inline-block so don't need to apply it manually -->
    <!-- margin-left: 15px is applied so that the buttons align with the 
        search field -->
        <a style="margin-left: 15px;" href="#" class="btn">Log in</a>
        <a href="#" class="btn btn-primary">Sign up</a>
        <form class="navbar-form" style="display:inline-block">
            <input type="text" class="search-query" placeholder="Search...">
        </form>     
    </div>

Answer 2

Navbar不再使用.pull-left或.pull-right，而是.navbar-left和.navbar-right。这避免了由于链接类而导致的特异性问题，并使样式更容易。

请参阅http://blog.getbootstrap.com/2013/08/13/bootstrap-3-rc2/