移动导航栏在引导程序中不起作用
[英]nav-bar for mobile not working in bootstrap
问题描述
我的菜单在 PC 上完美运行，但是当它显示在移动设备上时，我可以单击它，它会 go 消失，好像它带我去某个地方但什么也没发生……不知道发生了什么，有人可以帮帮我
还必须发布我的代码作为答案
1 个解决方案
解决方案1
0 2020-07-21 18:20:42
这是我当前的代码
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>apis Sanctum</title>
<!-- Bootstrap core CSS -->
<link href="css/bg.css" rel="stylesheet">
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/blog.css" rel="stylesheet">
<link href="css/custom-styles.css" rel="stylesheet">
<link href="css/image-effects.css" rel="stylesheet">
<link href="css/normalize.css" rel="stylesheet">
<link href="css/component.css" rel="stylesheet">
<link rel="stylesheet" href="css/font-awesome.css">
<link rel="stylesheet" href="css/font-awesome-ie7.css">
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<script src="js/modernizr.custom.js"></script>
</head>
<body>
<div class="container page-styling">
<div class="header-wrapper">
<div class="site-name">
<img src="img/title1.png" alt="" class=""><img src="img/title2.png" alt="" class="">
</div>
<!--------------------------------------------------------------------------------- Menu Bar --------------------------------------------------------------------->
<div class="menu">
<div class="navbar">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav ">
<li><a href="index.html">Home</a></li>
<li class="dropdown ">
<a href="#" class="dropdown-toggle active" data-toggle="dropdown">About<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="http://entnemdept.ufl.edu/creatures/MISC/BEES/euro_honey_bee.htm">Apis Mellifera</a></li>
<li><a href="Sanctum_Way.html">The Sanctum Way</a></li>
<li><a href="construction.html">Sanctum Alvarium</a></li>
</ul>
</li>
<li class="dropdown ">
<a href="#" class="dropdown-toggle active" data-toggle="dropdown">News<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="Blog.html">Buzz Blog</a></li>
<li><a href="https://www.google.com/search?biw=2560&bih=1292&tbm=nws&sxsrf=ACYBGNSmV-AkRf4x_HTd8CxClP41MOAg0A%3A1571337867589&ei=i7aoXZbAI8645gKwqbrIBQ&q=Honey+Bee&oq=Honey+Bee&gs_l=psy-ab.3..0l10.7127.7127.0.8117.1.1.0.0.0.0.285.285.2-1.1.0....0...1c.1.64.psy-ab..0.1.284....0.Fa7EiqCeuBY">Bee News</a></li>
</ul>
</li>
<li class="dropdown ">
<a href="#" class="dropdown-toggle active" data-toggle="dropdown">Donate<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="construction.html">Donate</a></li>
<li><a href="construction.html">Join Our Cause</a></li>
</ul>
</li>
<li><a href="Contact.html">Contact</a></li>
</ul>
</div><!--/.navbar-collapse -->
</div>
<div class="mini-menu">
<label>
<select class="selectnav">
<option value="#" selected="">Home</option>
<option value="#">About</option>
<option value="http://entnemdept.ufl.edu/creatures/MISC/BEES/euro_honey_bee.htm">→ Apis Mellifera</option>
<option value="Sanctum_Way.html">→ The Sanctum Way</option>
<option value="construction.html">→ Sanctum Alvarium</option>
<option value="#">News</option>
<option value="Blog.html">→ Buzz Blog</option>
<option value="https://www.google.com/search?biw=2560&bih=1292&tbm=nws&sxsrf=ACYBGNSmV-AkRf4x_HTd8CxClP41MOAg0A%3A1571337867589&ei=i7aoXZbAI8645gKwqbrIBQ&q=Honey+Bee&oq=Honey+Bee&gs_l=psy-ab.3..0l10.7127.7127.0.8117.1.1.0.0.0.0.285.285.2-1.1.0....0...1c.1.64.psy-ab..0.1.284....0.Fa7EiqCeuBY">→ Bee News</option>
<option value="#">Donate</option>
<option value="construction.html">→ Donate</option>
<option value="construction.html">→ Join Our Cause</option>
<option value="Contact.html">Contact</option>
</select>
</label>
</div>
</div>
</div>
Bootstrap导航栏品牌以移动为中心
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.