我已经尝试搜索Stack Overflow，遗憾的是没有找到任何可能的解决方案因此我决定发布一个问题。
所以我第一次使用bootstrap 3并且我使用他们的导航样式，.navbar .navbar-default并且他们有自己的高度，这使得bootstrap上的.active类能够覆盖整个导航，但是在我的情况下，我修改并创建一个新类并调用它.own-navbar我添加了这个css
.own-navbar{
height: 68px;
background: #ffffff;
background: -moz-linear-gradient(top, #ffffff 0%, #e2e2e2 48%, #cccccc 50%, #eaeaea 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(48%,#e2e2e2), color-stop(50%,#cccccc), color-stop(100%,#eaeaea));
background: -webkit-linear-gradient(top, #ffffff 0%,#e2e2e2 48%,#cccccc 50%,#eaeaea 100%);
background: -o-linear-gradient(top, #ffffff 0%,#e2e2e2 48%,#cccccc 50%,#eaeaea 100%);
background: -ms-linear-gradient(top, #ffffff 0%,#e2e2e2 48%,#cccccc 50%,#eaeaea 100%);
background: linear-gradient(to bottom, #ffffff 0%,#e2e2e2 48%,#cccccc 50%,#eaeaea 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=0 );
}
并进行了很多更改，这里的导航栏看起来像
http://i.stack.imgur.com/EXx4H.png
正如你们所看到的那样，bootstrap 3上的.active类并没有涵盖整个事情。那么我该如何解决呢？
这是我的完整HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<title>sWIFI - Free Wifi Hotspot!</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!-- SCRIPT -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<!-- NAVIGATION BAR -->
<div class="container">
<nav class="navbar navbar-default own-navbar">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#"><img src="img/se" class="se" title="Free Wifi Hotspot" /></a>
<h6>se</h6>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><img src="img/seperator.png" /></li>
<li class="active"><a class="red"href="#">HOME</a></li>
<li><img src="img/seperator.png" /></li>
<li><a href="#">ABOUT</a></li>
<li><img src="img/seperator.png" /></li>
<li><a href="#">CONTACT US</a></li>
<li><img src="img/seperator.png" /></li>
</ul>
<div class="search navbar-right">
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
<div class="input-group-btn">
<button class="btn btn-default search-btn" type="submit">Go!</button>
</div>
</div>
</form>
</div>
</div>
</div>
</nav>
</div>
<!-- END OF NAVIGATION BAR -->
</body>
</html>
和我的完整CSS代码
/** CSS STYLING SPECIALLY MADE FOR sWIFI and CODED by urielD3 **/
/** Defaults **/
body{
background-color: #f6f6f6;
}
/** NAVIGATION BAR & MENU **/
.own-navbar{
height: 68px;
background: #ffffff;
background: -moz-linear-gradient(top, #ffffff 0%, #e2e2e2 48%, #cccccc 50%, #eaeaea 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(48%,#e2e2e2), color-stop(50%,#cccccc), color-stop(100%,#eaeaea));
background: -webkit-linear-gradient(top, #ffffff 0%,#e2e2e2 48%,#cccccc 50%,#eaeaea 100%);
background: -o-linear-gradient(top, #ffffff 0%,#e2e2e2 48%,#cccccc 50%,#eaeaea 100%);
background: -ms-linear-gradient(top, #ffffff 0%,#e2e2e2 48%,#cccccc 50%,#eaeaea 100%);
background: linear-gradient(to bottom, #ffffff 0%,#e2e2e2 48%,#cccccc 50%,#eaeaea 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=0 );
}
.own-navbar .container-fluid .navbar-header .se{
margin: 2px 0px 0px 5px;
}
.own-navbar .container-fluid .navbar-header h6{
font-family: Verdana;
font-size: 12px;
color: #363636;
font-weight: bold;
text-shadow: 1px 1px 2px #7A7A7A;
margin: -6px 0px 0px 55px;
cursor: default;
}
li:hover{
/* margin: -7px 0 0 0;
height: 68px; */
background: #f3f3f3;
background: -moz-linear-gradient(top, #f3f3f3 0%, #f1f1f1 53%, #e1e1e1 53%, #ffffff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f3f3f3), color-stop(53%,#f1f1f1), color-stop(53%,#e1e1e1), color-stop(100%,#ffffff));
background: -webkit-linear-gradient(top, #f3f3f3 0%,#f1f1f1 53%,#e1e1e1 53%,#ffffff 100%);
background: -o-linear-gradient(top, #f3f3f3 0%,#f1f1f1 53%,#e1e1e1 53%,#ffffff 100%);
background: -ms-linear-gradient(top, #f3f3f3 0%,#f1f1f1 53%,#e1e1e1 53%,#ffffff 100%);
background: linear-gradient(to bottom, #f3f3f3 0%,#f1f1f1 53%,#e1e1e1 53%,#ffffff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3f3f3', endColorstr='#ffffff',GradientType=0 );
}
.asd{
color: red;
}
.own-navbar .container-fluid div ul{
margin: 7px 0px 0px 65px;
}
.own-navbar .container-fluid div ul li a{
color: #3B3B3B;
font-size: 15px;
font-family: Verdana;
font-weight: bolder;
}
.own-navbar .container-fluid div ul li img{
margin: -8px 0 0 0;
}
.own-navbar .container-fluid div .search form input{
border-radius: 20px;
width: 305px;
margin: 6px 0 0 0;
}
.own-navbar .container-fluid .search form .search-btn{
border-radius: 20px;
margin: 3px 0 0 15px;
}
答案 0 :(得分：0)
@Christina是正确的，但可能更直接的回答你的问题是你将你的.own-navbar高度设置为68，但这并不是真正做你想要的。您的分隔符图像高度为68px，因此您的导航栏已处于图像高度。当在较小的屏幕上添加导航栏折叠类时，在菜单导航列表中使用图像将导致问题。
您可以使用：
ul.nav.navbar-nav li {
height: 68px;
}
尝试修复按钮高度，但这会导致其他问题。
您可以删除分隔符图像并使用css在按钮之间创建分隔符。以下规则也会引起其他问题。
.own-navbar .container-fluid div ul {
margin: 7px 0 0 65px;
}
7px的最高保证金会给你带来麻烦。克里斯蒂娜建议，用线高或填充调整高度。您可以通过在div.navbar-header上设置min-width来解决左边距问题。
让Bootstrap确定最终的导航维度，响应行为将更好地运作。