bootstrap 中的导航栏崩溃无法正常工作
Navbar collapse in bootstrap not working
当我缩小页面大小时,我的导航栏会折叠,但是,一旦它在顶部变成 "hamburger",它会通过滚动突出显示,但我根本无法单击它。另外,我想知道为什么我的 "hamburger" 出现在导航栏的右侧而不是左侧。我想要它在左边。我已经尝试更改 class 类型和一些 css 但是,我只是看不出有什么问题。
HTML:
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/stylesheet.css" rel="stylesheet">
</head>
<body>
<div class="row">
<nav class="navbar navbar-custom" role="navigation">
<div class="navbar-header-xs">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse">
<span class="sr-only"> Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="collapse">
<ul class="nav navbar-nav">
<li><a href="index.html"><img src= "images/QBlogo.png" /></a></li>
<li><a href="work.html">Work</a></li>
<li><a href="about.html">About</a></li>
<li><a href="skills.html">Skills</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<nav>
</div>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/bootstrap.min.js"</script>
CSS:
body {
padding: 0px;
margin-top: align;
background: url(..images/QBhead.png) no-repeat center center fixed;
background size: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
.navbar {
margin-bottom: 0;
max-width: 100%;
max-height: 10%;
}
.navbar-custom {
background-color:#CCE1F4;
border-radius:2px;
font-size: 22px;
}
.navbar-custom .navbar-brand {
color: #2f4f7f;
}
.navbar-custom .navbar-nav > li > a {
color: #2f4f7f;
}
.navbar-custom .navbar-nav > li > a:hover,
.navbar-custom .navbar-nav > li > a:focus {
color: #000000;
background-color: transparent
}
.navbar-custom .navbar-toggle {
border-color: #2f4f7f;
}
.navbar-custom .navbar-toggle:hover,
.navbar-custom .navbar-toggle:focus {
background-color: #2f4f7f;
}
.navbar-custom .navbar-toggle .icon-bar {
background-color: #2f4f7f;
}
.navbar-nav > li{
align: left;
padding-left:25px;
padding-right:25px;
padding-top: 5px;
}
导航菜单没问题
唯一的问题是这里缺少结束标记 >
<script src="js/bootstrap.min.js"</script>
应该是
<script src="js/bootstrap.min.js"></script>
您可以尝试使用以下方法获得左侧的 "hamburger"...在您的 CSS 中,尝试
.navbar-custom .navbar-toggle {
float: left;
margin-left:20px;
border-color: #2f4f7f;
}
但是它会推出菜单。
当我缩小页面大小时,我的导航栏会折叠,但是,一旦它在顶部变成 "hamburger",它会通过滚动突出显示,但我根本无法单击它。另外,我想知道为什么我的 "hamburger" 出现在导航栏的右侧而不是左侧。我想要它在左边。我已经尝试更改 class 类型和一些 css 但是,我只是看不出有什么问题。
HTML:
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/stylesheet.css" rel="stylesheet">
</head>
<body>
<div class="row">
<nav class="navbar navbar-custom" role="navigation">
<div class="navbar-header-xs">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse">
<span class="sr-only"> Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="collapse">
<ul class="nav navbar-nav">
<li><a href="index.html"><img src= "images/QBlogo.png" /></a></li>
<li><a href="work.html">Work</a></li>
<li><a href="about.html">About</a></li>
<li><a href="skills.html">Skills</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<nav>
</div>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/bootstrap.min.js"</script>
CSS:
body {
padding: 0px;
margin-top: align;
background: url(..images/QBhead.png) no-repeat center center fixed;
background size: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
.navbar {
margin-bottom: 0;
max-width: 100%;
max-height: 10%;
}
.navbar-custom {
background-color:#CCE1F4;
border-radius:2px;
font-size: 22px;
}
.navbar-custom .navbar-brand {
color: #2f4f7f;
}
.navbar-custom .navbar-nav > li > a {
color: #2f4f7f;
}
.navbar-custom .navbar-nav > li > a:hover,
.navbar-custom .navbar-nav > li > a:focus {
color: #000000;
background-color: transparent
}
.navbar-custom .navbar-toggle {
border-color: #2f4f7f;
}
.navbar-custom .navbar-toggle:hover,
.navbar-custom .navbar-toggle:focus {
background-color: #2f4f7f;
}
.navbar-custom .navbar-toggle .icon-bar {
background-color: #2f4f7f;
}
.navbar-nav > li{
align: left;
padding-left:25px;
padding-right:25px;
padding-top: 5px;
}
导航菜单没问题
唯一的问题是这里缺少结束标记 >
<script src="js/bootstrap.min.js"</script>
应该是
<script src="js/bootstrap.min.js"></script>
您可以尝试使用以下方法获得左侧的 "hamburger"...在您的 CSS 中,尝试
.navbar-custom .navbar-toggle {
float: left;
margin-left:20px;
border-color: #2f4f7f;
}
但是它会推出菜单。