将一个菜单栏最小化后隐藏在另一个菜单栏下

时间：2018-07-26 08:39:32

标签： html twitter-bootstrap navbar

我制作了两个导航栏，但无法正常工作。您有什么建议吗？看起来像这样，但是在最小化之后，我缺少了HOME MIB和LIBRARY标签。我认为上层菜单涵盖了下层菜单。

点击菜单按钮后，我希望能够看到所有标签。

这是我的代码 aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 

<!DOCTYPE html>
<html lang="en">
<head>
  <title>my site</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
   body {
  padding-top: 50px;
  }
  </style>
   </head>
   <body>
    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">	
  
	<div class="navbar-header">
    <div class="navbar-header"><a class="navbar-brand" href="#">LOGO</a></div>
		<button class="navbar-toggle" type="button" data-target=".navbar-collapse" data-toggle="collapse">
		<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">
		<ul class="nav navbar-nav pull-right">
			<li><a href="#">Friends</a></li>
			<li><a href="#">Messages</a></li>
			<li class="dropdown">
              <a class="dropdown-toggle" href="#" data-toggle="dropdown">Account <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#">Settings</a></li>
                <li><a href="#">Stats</a></li>
	<li><a href="#">Logout</a></li>
              </ul>
            </li>
		</ul>
   
	</div>
</div>
<div class="navbar navbar-inverse navbar-static-top" role="navigation">	
	<div class="navbar-header">
		<button class="navbar-toggle" type="button" data-target=".navbar-collapse" data-toggle="collapse">
		<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">
		<ul class="nav navbar-nav">
			<li><a href="#">Home</a></li>
			<li class="dropdown">
              <a class="dropdown-toggle" href="#" data-toggle="dropdown">MIB's <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#">my MIB's</a></li>
                <li><a href="#">my feedback's</a></li>
	  <li><a href="#">my comment's</a></li>
              </ul>
            </li>

	<li class="dropdown">
              <a class="dropdown-toggle" href="#" data-toggle="dropdown">Library <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#">Standard</a></li>
                <li><a href="#">Random</a></li>
	  <li><a href="#">Custom</a></li>
              </ul>
            </li>

	<li><a href="#">Badges</a></li>

	<li class="dropdown">
              <a class="dropdown-toggle" href="#" data-toggle="dropdown">Help <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#">FAQ</a></li>
                <li><a href="#">Contact</a></li>
              </ul>
            </li>  	

		</ul>
	
	</div>
</div>
</body>
</html>

1 个答案:

答案 0 :(得分：0)

<!DOCTYPE html>
<html lang="en">
<head>
  <title>my site</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
   body {
  padding-top: 50px;
  }
  @media only screen and (max-width: 550px) {
   body {
	padding-top: 0px;
  }
    .navbar-fixed-top {position:static;}
	.navbar{margin-bottom:0;}
}
  </style>
   </head>
   <body>
    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">	
  
	<div class="navbar-header">
    <div class="navbar-header"><a class="navbar-brand" href="#">LOGO</a></div>
		<button class="navbar-toggle" type="button" data-target=".navbar-collapse1" data-toggle="collapse">
		<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-collapse1">
		<ul class="nav navbar-nav pull-right">
			<li><a href="#">Friends</a></li>
			<li><a href="#">Messages</a></li>
			<li class="dropdown">
              <a class="dropdown-toggle" href="#" data-toggle="dropdown">Account <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#">Settings</a></li>
                <li><a href="#">Stats</a></li>
	<li><a href="#">Logout</a></li>
              </ul>
            </li>
		</ul>
   
	</div>
</div>
<div class="navbar navbar-inverse navbar-static-top" role="navigation">	
	<div class="navbar-header">
		<button class="navbar-toggle" type="button" data-target=".navbar-collapse2" data-toggle="collapse">
		<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-collapse2">
		<ul class="nav navbar-nav">
			<li><a href="#">Home</a></li>
			<li class="dropdown">
              <a class="dropdown-toggle" href="#" data-toggle="dropdown">MIB's <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#">my MIB's</a></li>
                <li><a href="#">my feedback's</a></li>
	  <li><a href="#">my comment's</a></li>
              </ul>
            </li>

	<li class="dropdown">
              <a class="dropdown-toggle" href="#" data-toggle="dropdown">Library <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#">Standard</a></li>
                <li><a href="#">Random</a></li>
	  <li><a href="#">Custom</a></li>
              </ul>
            </li>

	<li><a href="#">Badges</a></li>

	<li class="dropdown">
              <a class="dropdown-toggle" href="#" data-toggle="dropdown">Help <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#">FAQ</a></li>
                <li><a href="#">Contact</a></li>
              </ul>
            </li>  	

		</ul>
	
	</div>
</div>
</body>
</html>
用这个。它正在正常运行

相关问题
最新问题