如何在窗口調整大小的同一行上保留導航欄？

我想讓我的導航欄上的任何東西落到窗口第二排變小。如何在窗口調整大小的同一行上保留導航欄？

我的導航欄目前包含：

品牌形象
搜索表單
附加按鈕

目前，最右側導航欄的另外的按鈕下降到第二排無論我做什麼，窗戶都會縮小。

如何防止導航欄最右側的按鈕掉到窗口大小的不同行上？

<nav class="nav" id="navigationBar" style=""> 
 
     <div class="row"> 
 
     <div class="col-sm-1"> 
 
      <a class="navbar-brand" href="/""><img src="mylogo.png" class="logo-small"></a> 
 
     </div> 
 

 
     <div class="col-sm-10"> 
 
      <form> 
 
       <div class="input-group" id="searchBar"> 
 
        <input type="text" class="form-control" id="searchInputText" placeholder="Search here." onsubmit="search()"> 
 
        <span class="input-group-btn"> 
 
        <button type="button" id="searchButton"><i class="flaticon-search"></i></button> 
 
       </span> 
 
      </div> 
 
      </form> 
 
     </div> 
 
     <div class="col-sm-1"> 
 
      <button type="button"><i class="flaticon-search"></i></button> 
 
     </div> 
 

 
    </div> 
 
    
 
</nav>

來源

2017-09-03 AlwaysQuestioning

你使用引導3或4？ – Zac

@Zac我正在使用bootstrap 3 – AlwaysQuestioning

@AlwaysQuestioning，你找到了解決方案嗎？ – cwanjt

您可以將類添加到您的div與使用兩個屬性的row類：

1）Display: flex，這將會把div到Flex容器中。

2）flex-wrap: nowrap，這將防止它纏繞...因此保持在同一條線上。

這是一個codeply project與實施的類。

CSS：

.d-nowrap-flex { 
    display: flex; 
    flex-wrap: nowrap; 
}

來源

2017-09-04 01:41:44 cwanjt

對於任何可能遇到此問題的人 - 沒有必要添加額外的樣式，所有這些都是錯誤的，OP沒有包含用於小型屏幕的網格類，它是'col-xs-xx'（例如'col-xs- 8'）。 – FluffyKitten

這實際上是你的代碼正確的行爲。

問題是col-sm-xx只能創建768px以上屏幕尺寸的列。在較小的屏幕，元素得到堆疊（參考Bootstrap Grids）

要顯示在小屏幕上

另外列（< 768px），以col-sm-xx你也需要添加col-xs-xx，例如

<div class="row"> 
    <div class="col-sm-1 col-xs-2"> 
    [...] 
    </div> 

    <div class="col-sm-10 col-xs-8"> 
    [...] 
    </div> 

    <div class="col-sm-1 col-xs-2"> 
    [...] 
    </div> 
</div>

注：XS列不必是相同的百分比在更大屏幕上，所以我建議給小列在XS網格更多的空間（如讓他們2/12，而不是1/12就像我的例子），因爲他們需要更多的空間來容納按鈕。

來源

2017-09-04 02:01:15 FluffyKitten

如何在窗口調整大小的同一行上保留導航欄？

回答

相關問題