Question

我一直试图解决这个问题，但我似乎无法找到问题所在。每当我点击导航栏中的一个选项时，它就会折叠到移动设备大小（目前在引导程序中设置为992px，因此它在平板电脑上可用），然后返回原始大小，结果检查后它的高度为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文件干扰了navbar元素。通过设置一些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类。因此，如果您更改下面显示的代码，则不应该发生。我也用容器流体类删除了div。

代码：（不要使用）

<!-- 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导航栏会折叠

1 个答案: