2
我想在引導程序中創建導航欄。在bootstrap-theme.min.css文件中添加了自定義樣式。這樣我就可以創建導航欄，但下拉菜單項隱藏在小屏幕設備的主菜單後面。碼和輸出的屏幕截圖如下：下拉菜單項隱藏在bootstrap自定義導航欄主菜單後面
樣式在自舉-theme.min.css文件添加：
#custom-bootstrap-menu.navbar-default .navbar-brand {
color: rgba(255, 255, 255, 1);
}
#custom-bootstrap-menu.navbar-default {
font-size: 14px; \t
background-image:url('https://s3.amazonaws.com/static.bizmerlin.net/bg_header.png');
\t background-repeat:repeat-x;
\t background-size:100% 100%;
border-width: 1px;
border-radius: 4px;
\t height: 40px;
\t background-color: rgba(70, 131, 176, 1);
}
#custom-bootstrap-menu.navbar-default .navbar-nav>li, .navbar-brand {
color: rgba(255, 255, 255, 1);
background-color: #528cb4;
\t height: 38px;
\t border: 1px solid #ffffff;
\t margin-top:4px;
\t border-radius: 5px;
\t margin-right: 6px;
\t font-size: 14px;
}
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a, .navbar-brand {
color: rgba(255, 255, 255, 1);
\t line-height: 10px;
}
#custom-bootstrap-menu.navbar-default .navbar-nav>li:hover,
#custom-bootstrap-menu.navbar-default .navbar-nav>li:focus {
\t background-color: #7fbb00; \t
}
#custom-bootstrap-menu.navbar-default .navbar-nav>li.active>a,
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:hover,
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:focus {
color: rgba(255, 255, 255, 1);
background-color: rgba(233, 129, 42, 1);
}
#custom-bootstrap-menu.navbar-default .navbar-toggle {
border-color: #e9812a;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle:hover,
#custom-bootstrap-menu.navbar-default .navbar-toggle:focus {
background-color: #e9812a;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle .icon-bar {
background-color: #e9812a;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle:hover .icon-bar,
#custom-bootstrap-menu.navbar-default .navbar-toggle:focus .icon-bar {
background-color: #4683b0;
}
#custom-bootstrap-menu.navbar-default .navbar-nav > li > .dropdown-menu {
background-color: #528cb4;
margin-top:10px;
}
#custom-bootstrap-menu.navbar-default .navbar-nav > li > .dropdown-menu > li > a {
color: #ffffff;
}
#custom-bootstrap-menu.navbar-default .navbar-nav > li > .dropdown-menu > li > a:hover,
#custom-bootstrap-menu.navbar-default .navbar-nav > li > .dropdown-menu > li > a:focus {
color: #aeff00;
background-image: none;
background-color: #528cb4;
}
#custom-bootstrap-menu.navbar-default .navbar-nav > .open > a {
\t background-image: none;
\t background-color: #7fbb00;
\t height: 36px;
\t border-radius: 4px;
}
.caret {
\t border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid;
display: inline-block;
height: 0;
margin-left: 2px;
vertical-align: middle;
width: 0;
}用於導航欄HTML代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap 3 Responsive Layout Example</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<style type="text/css">
\t </style>
</head>
<body>
<nav id="custom-bootstrap-menu" class="navbar navbar-default " role="navigation">
<div class="container">
<div class="navbar-header"><a class="navbar-brand" href="#">Home</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder"><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 class="collapse navbar-collapse navbar-menubuilder" >
<ul class="nav navbar-nav navbar-left">
<li style="background-color:#e9812a;"><a href="/">Home1</a>
</li>
<li><a href="/products">Products</a>
</li>
<li><a href="/about-us">About Us</a>
</li>
<li><a href="/contact">Contact Us</a>
</li>
\t \t \t \t <li class="dropdown">
\t \t \t \t \t <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu" >
<li><a href="#">Page 1-1</a></li>
<li><a href="#">Page 1-2</a>
\t \t \t \t <ul class="dropdown-menu sub-menu">
\t \t \t \t \t <li><a href="">asf</a></li>
\t \t \t \t </ul>
\t \t \t </li>
<li><a href="#">Page 1-3</a></li>
</ul>
\t \t \t \t </li>
\t \t \t \t <li><a href="/contact">Contact Us</a>
</li>
\t \t \t \t </ul>
\t \t \t \t <ul class="nav navbar-nav navbar-right">
\t \t \t \t <li><a href="">Analytics</a></li>
</ul>
</div>
</div>
</nav> \t
<div class="container">
</div>
</body>
</html>輸出結果爲：
下拉菜單隱藏在Contactus和Anlytics後面。請幫我解決這個問題。提前致謝。如果我的問題不清楚，請告訴我。
的jsfiddle這裏http://jsfiddle.net/38fmg5h3/2/
您的問題是否得到解決？ – 2015-04-23 13:40:00