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

导航栏显示在多行中而不折叠成图标

关注

发信

关注(28)粉丝(399)

本文介绍了防止 Bootstrap 导航栏显示在多行中而不折叠成图标的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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

</nav>

解决方案

(2018 年更新)

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

.navbar-nav>li, .navbar-nav {浮动:左！重要；}

Bootstrap 3 演示

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

<div class="container-fluid"><ul class="nav navbar-nav"><li><a href="#" class="nav-link">项目 1</a></li><li><a href="#" class="nav-link">项目 2</a></li>

</nav>

Bootstrap 4 演示

I've a simple Bootstrap Navbar with just couple of items in them. And at width less than 768 it displays in 2 rows. How do I display both the items in a single row as is in higher widths(I don't want to use collapse feature)

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

解决方案

(Updated 2018)

The navbar-nav will always stack items at screen width less than 768 px., but you can override the vertical stacking like this..

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

Bootstrap 3 Demo

In Bootstrap 4, you just use the navbar-expand class...

<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 导航栏显示在多行中而不折叠成图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

09-02 12:44