Question

我希望导航栏上的任何内容都不会落到窗口的第二行变小。

我的导航栏目前包含：

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

目前，无论我做什么，当窗口缩小时，导航栏最右侧的附加按钮会下降到第二行。

如何防止导航栏最右侧的按钮在窗口调整大小时掉到另一行？

＆＃13;

   <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>

＆＃13;

Answer 1

您可以使用div类使用两个属性向row添加一个类：

1）Display: flex，它会将div变成灵活容器。

2）flex-wrap: nowrap，这将阻止它包装......从而使它保持在同一条线上。

这是一个codeply project，实现了这个类。

CSS：

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

Answer 2

这实际上是您拥有的代码的正确行为。

问题是col-sm-xx仅为768px以上的屏幕尺寸创建了列。在较小的屏幕上，元素被堆叠（Ref Bootstrap Grids）

在小屏幕上显示列（＆lt; 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，如我的例子）因为他们需要更多空间来按住按钮。

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

2 个答案: