Question

我有一个简单的Bootstrap Navbar，里面只有几个项目。宽度小于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>

Answer 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

防止Bootstrap导航栏以多行显示而不会折叠成图标

1 个答案: