如何在窗口调整大小的同一行上保留导航栏？

我想让我的导航栏上的任何东西落到窗口第二排变小。如何在窗口调整大小的同一行上保留导航栏？

我的导航栏目前包含：

品牌形象
搜索表单
附加按钮

目前，最右侧导航栏的另外的按钮下降到第二排无论我做什么，窗户都会缩小。

如何防止导航栏最右侧的按钮掉到窗口大小的不同行上？

<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

如何在窗口调整大小的同一行上保留导航栏？

回答

相关问题