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

我有以下代码（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>

当加载桌面，我得到这个： Loaded as desktop 注意“登录”和“注册”按钮，都在搜索栏。

然而，当我调整浏览器，导航栏响应我得到这个： mobile version

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

我试过在float: right父div中包装按钮和搜索栏。这导致他们停留在正确的顺序，但导致他们离奇的偏旁。这是不可取的。有没有人有解决方案，导致他们的顺序不被扭转？

来源

2013-03-14 Jaxkr

你能张贴你的CSS代码，以及，我们不能没有它回答。 – TDsouza 2013-03-14 04:24:15

http://pastebin.com/sgVSnL7u 我使用默认的引导程序CSS，而我自己的所有程序都在HTML中。 – Jaxkr 2013-03-14 04:27:30

问题是navbar-form和navbar-search上的浮点数被设置为none，一旦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>

来源

2013-03-14 06:58:39 gurch101