我遇到问题，我已经设置了一个导航菜单，以显示该菜单不在移动视图中但没有显示，但是当我进入移动视图并按导航按钮时，所有页面都显示出来。现在，当我回到桌面模式时，一切正常，因此我想知道是什么原因导致导航无法在桌面模式下工作。
这是我的index.php和style.css。
/*
Template Name : Electronics Hub
Author Name : Marcus
Author Email : *******.iinet.net.au
Theme URL : www.electronicshub.tech / localhost/electronicshub
Theme Ver : 1.1
*/
/* General Style */
body{
font-size: 14px;
line-height: 1.42857143;
color: #333333;
background: #f0f0f0;
overflow-x: hidden;
}
/* Top Styles */
#top{
background: #555555;
padding: 10px 0;
}
#top .offer{
color: #ffffff;
}
#top .offer .btn{
text-transform: uppercase;
}
@media(max-width: 991px){
#top .offer{
margin-bottom: 10px;
}
}
@media(max-width: 991px){
#top{
font-size: 12px;
text-align: center;
}
}
#top a{
color: #ffffff;
}
#top ul.menu{
padding-top: 5px;
margin: 0px;
text-align: right;
font-size: 12px;
list-style: none;
}
@media(max-width: 991px){
#top ul.mwnu{
text-align: center;
}
}
#top ul.menu > li{
display: inline-block;
}
#top ul.menu > li a{
color: #ffffff;
}
#top ul.menu > li + li:before{
content: "|\00a0";
color: #f7f7f7;
padding: 0 5px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Electronics Hub</title>
<link rel="stylesheet" href="styles/bootstrap-337.min.css">
<link rel="stylesheet" href="font-awsome\css\font-awesome.min.css">
<link rel="stylesheet" href="styles/style.css">
</head>
<body>
<div id="top"><!-- Top Begin -->
<div class="container"><!-- Container Begin -->
<div class="col-md-6 offer"><!-- Col-md-6 offer Begin -->
<a href="#" class="btn btn-success btn-sn">Welcome</a>
<a href="checkout.php">4 times in your Cart | Cart Total Price: $300</a>
</div><!-- Col-md-6 offer Finished -->
<div class="col-md-6"><!-- Col-md-6 offer Begin -->
<ul class="menu"><!-- Menu Begin -->
<li>
<a href="customer_register.php">Register</a>
</li>
<li>
<a href="checkout.php">My Account</a>
</li>
<li>
<a href="cart.php">Go to Cart</a>
</li>
<li>
<a href="checkout.php">Login</a>
</li>
</ul><!-- Menu Finished -->
</div><!-- Col-md-6 offer Finished -->
</div><!-- Container Finished -->
</div><!-- Top Finished -->
<div id="navbar" class="navbar navbar-default"><!-- Navbar navbar-default Begin -->
<div class="container"> <!-- Container Begin -->
<div class="navbar-header"><!-- Navbar-header Begin -->
<a href="index.php" class="navbar-brand home"><!-- Navbar-brand home Begin -->
<img src="images/ecom-store-logo.png" alt="Electronicshub Logo" class="hidden-xs">
<img src="images/ecom-store-logo-mobile.png" alt="Electronicshub Logo Mobile" class="visible-xs"></img>
</a><!-- Navbar-brand home Finished -->
<button class="navbar-toggle" data-toggle="collapse" data-target="#navigation">
<span class="sr-only">Toggle Navigation</span>
<i class="fa fa-align-justify"></i>
</button>
<button class="navbar-toggle" data-toggle="collapse"data-target="#search">
<span class="sr-only">Toggle Search</span>
<i class="fa fa-search"></i>
</button>
</div><!-- Navbar-header Finished -->
<div class="navbar-collaspe collapse" id="navigation"><!-- Navbar-collaspe collapse Begin -->
<div class="padding-nav"><!-- Padding-nav Begin -->
<ul class="nav navbar-nav left"><!-- Nav navbar-nav left Begin -->
<li class="active">
<a href="index.php">Home</a>
</li>
<li>
<a href="shop.php">Shop</a>
</li>
<li>
<a href="checkout.php">My Account</a>
</li>
<li>
<a href="cart.php">Shopping Cart</a>
</li>
<li>
<a href="contact.php">Contact Us</a>
</li>
</ul><!-- Nav navbar-nav left Finished -->
</div><!-- Padding-nav Finished -->
</div><!-- Navbar-collaspe collapse Finished -->
</div><!-- Container Finished -->
</div><!-- Navbar navbar-default Finished -->
<script src="js/jquery-331.min.js"></script>
<script src="js/bootstrap-337.min.js"></script>
</body>
</html>
我希望导航菜单在桌面模式下显示，而不是在进入移动导航时显示。
答案 0 :(得分：0)
该菜单在使用 bootstrap4 的桌面视图中正常工作。请try: http://jsfiddle.net/spyd8ezw/
答案 1 :(得分：0)
错误在这一行。
<div class="navbar-collaspe collapse" id="navigation"><!-- Navbar-collaspe折叠开始->
应该是：
class="navbar-collapse collapse"
拼写错误，仅此而已。 希望这会有所帮助。