Bootstrap 单击选项后导航栏折叠

Question

我已经尝试解决这个问题一段时间了，但我似乎无法找到问题所在。每当我从导航栏中单击一个选项时，它都会折叠为移动尺寸（目前在 bootstrap 中设置为 992px，因此它在平板电脑上可用），然后 return 到原始尺寸，事实证明它有检查后高度为 80px。之前还好好的，后来改了一些代码突然变了。我在下面包含了一些问题的图片。

HTML:

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">

    <!-- Navigation logo and dropdown icon -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
      data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#"><img src="css/logo-dream.png" id="logo"></img></a>
    </div>

    <!-- Navigation Options -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right" id="nav-appearance">
        <li id="main-nav"><a href="#home">Home <span class="sr-only">(current)</span></a></li>
        <li id="main-nav"><a href="#about">About Us</a></li>
        <li id="main-nav"><a href="#services">Services</a></li>
        <li id="main-nav"><a href="#gallery">Gallery</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div>
  </div>
</nav>

下面是我用过的CSS代码：

/* Main navbar design */
.navbar {
  border-radius: 0px;
  opacity: 0.95;
  background-color: #171717;
  border-bottom: 1px solid #9494b8;
  margin-bottom: 0 !important;
}

.navbar .navbar-nav {
  margin: 15px 0;
}

/* Navbar company logo */
.navbar-brand {
  padding: 0;
}

#logo {
  margin-left: 40px;
  width: 171px;
  height: 66px;
  margin-top: 8px;
}

/* Navbar options */
#nav-appearance {
  font-size: 1.7rem;
  margin-right: 40px;
  font-family: 'Quicksand', sans-serif;
}

#nav-appearance li {
  padding-left: 35px;
}

.collapse {
  padding: 0;
}

.navbar-collapse {
  padding: 0;
}

/* ======= MEDIA QUERIES FOR NAVIGATION AND HOME ======= */

/* Tablets */
@media (max-width: 991px) {

  #nav-appearance {
    font-size: 1.7rem;
    margin-right: 10px;
  }

  #nav-appearance a {
    padding: 0;
  }

  #nav-appearance li {
    padding: 15px 0 15px 0;
    width: 80%;
    transform: translateX(-50%);
    top: 0;
    left: 52%;
  }

  #main-nav {
    border-bottom: 1px solid rgba(55, 55, 55, .95);
  }

  #logo {
    content:url("home-icon-tiny.png");
    height: 34px;
    width: 34px;
    margin-left: 13px;
  }
}

/* Mobile */
@media (max-width: 767px) {

  #logo {
    margin-left: 13px;
  }
}

任何人都可以看到任何问题吗？我希望这是一个简单的修复。

Answer 1

更新：

从页面上可以清楚地看出其中一个 JS 文件干扰了导航栏元素。通过设置一些CSS我们可以去除高度变化，请在下面找到CSS.

Codepen: here

CSS:

.navbar-brand img{
  margin-top:7px;
  margin-bottom:7px;
}

/* Navbar company logo */
.navbar-brand {
  padding: 0;
  height:100%;
}

HTML:

    <!-- Navigation logo and dropdown icon -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
      data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#"><img src="css/logo-dream.png" id="logo"></img></a>
    </div>

    <!-- Navigation Options -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right" id="nav-appearance">
        <li id="main-nav"><a href="#home">Home <span class="sr-only">(current)</span></a></li>
        <li id="main-nav"><a href="#about">About Us</a></li>
        <li id="main-nav"><a href="#services">Services</a></li>
        <li id="main-nav"><a href="#gallery">Gallery</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div>
  </div>
</nav>

根据给出的图像，我会说这是一个没有高度问题的浮动元素，解决方案是 clearfix class。因此，如果您如下所示更改代码，则不会发生这种情况。我还删除了 div with container-fluid class.

代码：（请勿使用）

<!-- Navigation logo and dropdown icon -->
<div class="navbar-header">
  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
  data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <a class="navbar-brand" href="#"><img src="css/logo-dream.png" id="logo"></img></a>
</div>

<!-- Navigation Options -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  <ul class="nav navbar-nav navbar-right" id="nav-appearance">
    <li id="main-nav"><a href="#home">Home <span class="sr-only">(current)</span></a></li>
    <li id="main-nav"><a href="#about">About Us</a></li>
    <li id="main-nav"><a href="#services">Services</a></li>
    <li id="main-nav"><a href="#gallery">Gallery</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</div>

Bootstrap 单击选项后导航栏折叠

Bootstrap navbar collapsing upon clicking an option

css

navigationbar

twitter-bootstrap