Twitter Boostrap響應式導航欄問題與搜索表單時摺疊

Question

我使用引導響應式導航欄摺疊導航欄中的鏈接時，屏幕較小。我想保留一個按鈕和一個搜索框不在摺疊區域。這是我的代碼：

<div class="navbar navbar-inverse navbar-fixed-top"> 
     <div class="navbar-inner"> 
      <div class="container-fluid">      
       <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> 

       <a class="brand" href="/">site name</a> 

       <div class="nav-collapse"> 
        <ul class="nav"> 
         <li><a href="#">Home</a></li> 
         <li><a href="#">Other</a></li>  
        </ul> 
       </div> 

       <form action="#" class="navbar-search pull-left"> 
        <input name="search" class = "search-query" /> 
       </form> 

       <div class="btn-group pull-right"> 
        <button class="btn btn-primary">Log In</button> 
       </div> 
      </div> 
     </div>  
    </div> 

這看起來不錯正常時，屏幕上，但一旦鏈接崩潰，按鈕和搜索框被迫之下，加倍資產淨值的高度。

如果我將搜索框移到nav-collapse鏈接的左側，它可以正常工作，但我需要首先顯示鏈接。

任何想法如何實現這一目標？

Answer 1

很難說明未經測試，但您可以嘗試在容器中添加white-space: nowrap樣式。

<div class="container-fluid nowrap"> 

CSS：

.nowrap { white-space: nowrap; } 

編輯：
做了一些測試，我相信這個模擬你要找的行爲：

<div class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="navbar-inner"> 
     <div class="container-fluid">      
      <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> 

      <a class="brand" href="/">site name</a> 

      <div class="btn-group pull-right"> 
       <button class="btn btn-primary">Log In</button> 
      </div> 
      <div class="pull-left"> 
      <form action="#" class="navbar-search pull-right"> 
       <input name="search" class = "search-query" /> 
      </form> 

      <div class="nav-collapse pull-right"> 
       <ul class="nav"> 
        <li><a href="#">Home</a></li> 
        <li><a href="#">Other</a></li>  
       </ul> 
      </div> 
      </div> 
     </div> 
    </div>  
</div> 

CSS：

@media (max-width: 979px) { 
    .navbar .btn-navbar { float: left !important; } 
    .navbar-search { float: left; } 
} 

基本上，只要漂浮的鏈接和搜索欄的右側和在漂浮留下一個div包裹它們（模擬屏幕寬度> 979px當前行爲）。
然後，當窗口縮小以避免換行時，將鏈接和搜索欄浮動到左側。

它仍然會在非常小的屏幕寬度上斷開，只是因爲搜索欄太寬而無法與其餘內容匹配。您可以通過相應地重寫寬度來防止這種情況發生。
例如：

.search-query { width: 150px !important }