Html 引导导航栏在小屏幕上占用了太多空间

我正在使用Bootstrap3制作一个响应迅速的网站。收拢的导航栏存在一个问题，它占用了所有导航链接项目的总高度，而不是正常高度（即一个导航链接项目的高度）。这是我所说内容的截图

这是我的HTML，我没有覆盖任何默认的引导CSS

<!-- Static navbar -->
  <nav class="navbar navbar-inverse">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>

      </div>
      <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Executive Committee</a></li>
          <li><a href="#">Service Offerings</a></li>
          <li><a href="#">Schedule</a></li>
          <li><a href="#">Membership</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Contact Us<span class="caret"></span></a>
            <ul class="dropdown-menu" role="menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li class="divider"></li>
              <li class="dropdown-header">Nav header</li>
              <li><a href="#">Separated link</a></li>
              <li><a href="#">One more separated link</a></li>
            </ul>
          </li>
        </ul>
      </div><!--/.nav-collapse -->
    </div><!--/.container-fluid -->
  </nav>

切换导航













导航标题

启动模板
切换导航













导航标题





引导启动程序模板
将此文档用作快速启动任何新项目的一种方式。
您得到的只是此文本和一个基本上没有内容的HTML文档

这很好用。。。 刚刚将导航栏添加到 并改变了：

<nav class="navbar navbar-inverse">

进入

我认为您忘记了代码中的javascript：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>

在getbootstrap.com上

如果禁用了JavaScript并且视口 如果宽度足够窄，导航栏会倒塌，则不可能 展开导航栏并查看.navbar折叠中的内容

响应的navbar要求将折叠插件包括在 你的引导版本

---

我已经解决了这个问题。在我的css中，有一点：

.navbar-collapse.collapse {
    text-align: center
    display: block !important;
    height: auto !important;
    padding-bottom: 0;
    overflow: visible !important;
}

我删除了所有规则，但文本对齐和导航栏正常工作

---

谢谢大家的帮助。

您介意提供一个与其他相关CSS的链接吗？作为对您以后文章的建议，在jsfiddle.net中，您可以编写代码以方便共享。这将比使用图像更容易。在Stackoverflow中，当您共享一个JSFIDLE链接时，您必须像编写代码一样编写代码。感谢您的建议@RicardoCastañedaI将这两个文件都包括在内，尽管它们在我的机器上没有在线托管。我试过了，但没用。我想问题可能在我的css中？你可以随时使用

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>

.navbar-collapse.collapse {
    text-align: center
    display: block !important;
    height: auto !important;
    padding-bottom: 0;
    overflow: visible !important;
}