保持摺疊的導航欄重新排列拉右元素？

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