防止 Bootstrap 导航栏在不折叠成图标的情况下以多行显示

【问题标题】：Prevent Bootstrap navbar from displaying in multiple lines without collapsing into icon防止 Bootstrap 导航栏在不折叠成图标的情况下以多行显示
【发布时间】：2018-04-05 19:06:30
【问题描述】：

我有一个简单的 Bootstrap 导航栏，其中只有几个项目。在宽度小于 768 时，它显示为 2 行。如何在单行中以更高的宽度显示这两个项目（我不想使用折叠功能）

    <nav class="navbar navbar-default">
      <div class="row">
        <ul class="nav navbar-nav">
          <li class=""><a href="#">Item 1</a></li>
          <li><a href="#">Item 2</a></li> 
        </ul>
      </div>
    </nav>

【问题讨论】：

标签： css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

（2018 年更新）

navbar-nav 将始终以小于 768 像素的屏幕宽度堆叠项目。但您可以像这样覆盖垂直堆叠..

.navbar-nav>li, .navbar-nav {
  float: left !important;
}

Bootstrap 3 Demo

在 Bootstrap 4 中，您只需使用 navbar-expand 类...

<nav class="navbar navbar-light bg-light navbar-expand">
  <div class="container-fluid">
    <ul class="nav navbar-nav">
      <li><a href="#" class="nav-link">Item 1</a></li>
      <li><a href="#" class="nav-link">Item 2</a></li> 
    </ul>
  </div>
</nav>

Bootstrap 4 Demo

【讨论】：