【问题标题】:one menu bar hiding under another after minimizing一个菜单栏在最小化后隐藏在另一个菜单栏下
【发布时间】:2018-07-26 17:10:24
【问题描述】:

我制作了两个导航栏,但它不能正常工作。你有什么建议吗?它看起来像这样,但是在最小化之后我缺少 HOME MIB 和 LIBRARY 选项卡。我认为上层菜单涵盖了下层菜单。

我希望能够在单击菜单按钮后查看所有选项卡。

这是我的代码 啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊

<!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>

【问题讨论】:

  • 只需删除位置:已修复,它会显示所有内容
  • 您好,移除固定位置后,我的菜单是分开的,它们带有 2 个菜单按钮 :( 我希望只有一个菜单按钮而不是单独的菜单栏 :)

标签: html twitter-bootstrap navbar


【解决方案1】:

<!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>
用这个。它工作得很好

【讨论】:

  • 你好,是的,这是我想要实现的,但我不想有两个菜单按钮,只有一个,在最小化之后它应该显示所有选项卡:) 你有什么建议吗? :)
  • ok 隐藏第二个导航并在移动视图的第一个导航中移动所有选项。
猜你喜欢
  • 1970-01-01
  • 2021-08-15
  • 1970-01-01
  • 2018-12-05
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2012-03-16
相关资源
最近更新 更多