引导导航栏不会展开或显示菜单项
我是一名平面设计师，几周前开始编写代码，希望能进入前端领域。我正在建设的这个样本网站不在导航栏区域进行合作。我在我所有的桌面视图中都很好地设置了它，但当它折叠时，我似乎无法让它工作。它不会展开或显示菜单项。我找了所有我能找的，但我只是找到了不同类型的酒吧，都有同样的问题。我正在使用方括号。
我们非常感谢您的任何帮助，即使您看到一些与我搞砸了无关的事情。
谢谢！
这是我的html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>loot</title>
<meta name="description" content="fast and personal messenger delivery service">
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="jumbotron header">
</div>
</div>
<div class="container">
<nav class = "navbar navbar-default navbar-right" role = "navigation">
<div class = "navbar-header">
<button type = "button" class = "navbar-toggle"
data-toggle = "collapse" data-target = "#example-navbar-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" id = "example-navbar-collapse">
<ul class = "nav navbar-nav">
<li class = "active"><a href = "#">Home</a></li>
<li><a href = "#">About</a></li>
<li><a href= "#">Merch</a></li>
<li><div class="btn btn-primary">Schedule a pickup</div></li>
<li><div class="btn btn-success">Schedule a delivery</div></li>
</ul>
</div>
</nav>
</div>
</body>
和我的css
.header {
background-color: #46B4CE !important;
background: url(images/loot-whiteArtboard%201@0.75x.png) no-repeat center center;
background-size: 30%;
position: relative;
margin-top: 25px;
height: 20em;
}
/*extra small devices*/
@media (min-width: 300px) {
.header {
background-size: 55%;
height: 15em;
}
}
/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
.header {
background-size: 40%;
}
}
/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
.header {
background-size: 30%;
}
}
.btn{
margin-left:10px;
margin-top:8px;
}
.navbar {
margin-top: -30px;
}
fullscreen view of site
mobile view not able to be expanded
解决方案
您必须将引导js和jQuery min js添加到Work NAV菜单中。
数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假"> .header {
background-color: #46B4CE !important;
background: url(images/loot-whiteArtboard%201@0.75x.png) no-repeat center center;
background-size: 30%;
position: relative;
margin-top: 25px;
height: 20em;
}
/*extra small devices*/
@media (min-width: 300px) {
.header {
background-size: 55%;
height: 15em;
}
}
/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
.header {
background-size: 40%;
}
}
/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
.header {
background-size: 30%;
}
}
.btn{
margin-left:10px;
margin-top:8px;
}
.navbar {
margin-top: -30px;
}<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>loot</title>
<meta name="description" content="fast and personal messenger delivery service">
<!-- <link rel="stylesheet" href="main.css"> -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="jumbotron header">
</div>
</div>
<div class="container">
<nav class = "navbar navbar-default navbar-right" role = "navigation">
<div class = "navbar-header">
<button type = "button" class = "navbar-toggle"
data-toggle = "collapse" data-target = "#example-navbar-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" id = "example-navbar-collapse">
<ul class = "nav navbar-nav">
<li class = "active"><a href = "#">Home</a></li>
<li><a href = "#">About</a></li>
<li><a href= "#">Merch</a></li>
<li><div class="btn btn-primary">Schedule a pickup</div></li>
<li><div class="btn btn-success">Schedule a delivery</div></li>
</ul>
</div>
</nav>
</div>
</body>相关文章