【发布时间】：2017-08-18 18:42:31
【问题描述】：
我一直在尝试解决这个问题，但我似乎无法找到问题所在。每当我从导航栏中单击一个选项时，它会折叠到移动设备大小（当前在引导程序中设置为 992 像素，因此它可以在平板电脑上使用），然后返回到原始大小，事实证明它在检查后具有 80 像素的高度。以前没问题，但是修改了一些代码后突然变了。我在下面包含了一些问题的图片。
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;
}
}
任何人都可以看到任何问题吗？我希望这很容易解决。
【问题讨论】：
-
也可以发布您的标记。如果不查看您的标记正在做什么，就很难诊断问题。
-
@filip 一个有问题的 jsfiddle 将很容易调试
-
@jgetner 已更新。不能真正做一个 jsfiddle，因为它是一个引导导航栏。
标签： css twitter-bootstrap navigationbar