导航栏不会折叠，不会在Twitter Bootstrap 3模板中居中
[英]Navbar does not collapse and center in Twitter Bootstrap 3 template
问题描述
当我将窗口调整为移动大小时，导航栏不会折叠，并且菜单选择图标没有响应。 导航栏也无法居中。 （对不起，我的英语不是最好的）。
这是页面标题：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf -8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!--Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!--HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
注意CSS样式：
<style>
#header{
text-align: center;
background-color: #add8e6;
width: 100%;
padding-bottom 20px;
top: 0;
position: fixed;
}
.menu {
background-color: white;
line-height:30px;
letter-spacing:1px;
width:100%;
border: 3px solid grey;
}
.content{
position: relative;
}
.fixed{
position:fixed;
z-index:99;
}
@media (min-width: 768px) {
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
background-color:white;
}
.navbar .navbar-collapse {
text-align: center;
}
}
#details{
background-color: blue;
}
#footer{
}
#topContainer{
background-color: green;
}
</style>
</head>
<body >
<header id="header">
<br/>
<div><h1 style="font-size:400%;"><strong>Du suchst eine günstige Mietwohnung in Jena?</strong></h1></div>
<div><h3 style="font-size:200%;">Deine neue 3-Zimmer-Wohnung liegt im 20min entfernten Rothenstein</h3></div>
<br/>
</header>
<div class="content contentContainer" id="topContainer">
<div class="content">
<nav class="menu navbar-default">
<div class="container" >
<div class="navbar-header navbar-default" >
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse" data-target=".navbar-collapse"
aria-expanded="false" aria-controls="navbar">
<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 class="active"><a href="#topContainer">Home</a></li>
<li><a href="#details">About</a></li>
<li><a href="#footer">Download The App</a></li>
</ul>
</div>
</div>
</nav>
</div>
<div id="topContainerContent">
</div>
</div>
<div class="content contentContainer" id="details">
<p> hallo</p>
</div>
<div class="content contentContainer" id="footer">
<img class="img-responsive" style="width: 150%; height: 900px;"src="http://thumbs.dreamstime.com/z/mann-der-laptop-im-b%C3%BCro-verwendet-37942789.jpg">
<p> hallo</p>
</img>
</div>
外挂程式：
<!--jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!--Include all compiled plugins (below), or include individual files asneeded -->
<script src="js/bootstrap.min.js"></script>
<script>
$(".contentContainer").css("min-height",$(window).height());
var headerHeight = $('#header').height();
$('nav').css("marginTop",headerHeight);
$(document).ready(function(){
$(window).bind('scroll', function() {
if ($(window).scrollTop() > headerHeight) {
$('nav').addClass('fixed').css("top", -headerHeight);
$('body').css("marginTop",headerHeight);
}
else {
$('nav').removeClass('fixed');
$('body').css("marginTop","0");
}
});
});
$(window).resize(function(){
$(".contentContainer").css("min-height",$(window).height());
headerHeight = $('#header').height();
$('nav').css("marginTop",headerHeight);
$(document).ready(function(){
$(window).bind('scroll', function() {
if ($(window).scrollTop() > headerHeight) {
$('nav').addClass('fixed').css("top", -headerHeight);
$('body').css("marginTop",headerHeight);
}
else {
$('nav').removeClass('fixed');
$('body').css("marginTop","0");
}
});
});
});
</script>
</body>
</html>
2 个解决方案
解决方案1
2 已采纳 2015-09-22 17:15:28
3件事：
您应该在Bootstrap之前添加jQuery，在
head包含bootstrap CND，但不包括jQuery，您要在body标签的末尾声明jQuery。 在底部的jQuery声明后从头移出bootstrap的声明关于导航栏没有响应：
您几乎在文件末尾的img标记内包含内容：
<img class="img-responsive" style="width: 150%; height: 900px;"src="http://thumbs.dreamstime.com/z/mann-der-laptop-im-b%C3%BCro-verwendet-37942789.jpg">
<p> hallo</p>
</img>
如果您使用的是HTML5，则应具有以下功能：
<img class="img-responsive" style="width: 150%; height: 900px;"src="http://thumbs.dreamstime.com/z/mann-der-laptop-im-b%C3%BCro-verwendet-37942789.jpg" />
<p> hallo</p>
或在XHTML中：
<img class="img-responsive" style="width: 150%; height: 900px;"src="http://thumbs.dreamstime.com/z/mann-der-laptop-im-b%C3%BCro-verwendet-37942789.jpg"></img>
<p> hallo</p>
不要将内容放置在img标签内。
- 关于导航栏居中：
在CSS中添加以下内容：
div.navbar-collapse.collapse {
line-height: 10px; /* There is a little space appearing at the
bottom, you can adjust it with this value */
text-align: center;
}
ul.nav.navbar-nav {
display: inline-block;
float: none;
}
可用的jsFiddle： http ： //jsfiddle.net/tLxneqkb/1/
解决方案2
1 2015-09-22 18:45:11
就居中而言，您使用menu代替了navbar （默认值），因此您的CSS将无法使用，因为您正在使用以下代码：
@media (min-width: 768px) {
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
background-color:white;
}
.navbar .navbar-collapse {
text-align: center;
}
}
您还将navbar-default与navbar-header混合在一起，这就是为什么您的navbar不能将白色背景保持在768px以下的原因。
就依赖顺序而言，其他人已经解决了菜单未打开的问题。
$(".contentContainer").css("min-height", $(window).height()); var headerHeight = $('#header').height(); $('nav').css("marginTop", headerHeight); $(document).ready(function() { $(window).bind('scroll', function() { if ($(window).scrollTop() > headerHeight) { $('nav').addClass('fixed').css("top", -headerHeight); $('body').css("marginTop", headerHeight); } else { $('nav').removeClass('fixed'); $('body').css("marginTop", "0"); } }); }); $(window).resize(function() { $(".contentContainer").css("min-height", $(window).height()); headerHeight = $('#header').height(); $('nav').css("marginTop", headerHeight); $(document).ready(function() { $(window).bind('scroll', function() { if ($(window).scrollTop() > headerHeight) { $('nav').addClass('fixed').css("top", -headerHeight); $('body').css("marginTop", headerHeight); } else { $('nav').removeClass('fixed'); $('body').css("marginTop", "0"); } }); }); });
#header { text-align: center; background-color: #add8e6; width: 100%; padding-bottom 20px; top: 0; position: fixed; } .menu.navbar-default { background: white; line-height: 30px; letter-spacing: 1px; width: 100%; border: 3px solid grey; } .content { position: relative; } .fixed { position: fixed; z-index: 99; } @media (min-width: 768px) { .menu.navbar-default .navbar-nav { width: 100%; text-align: center; } .menu.navbar-default .navbar-nav > li { float: none; display: inline-block; } } #details { background-color: blue; } #footer {} #topContainer { background-color: green; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <header id="header"> <br/> <div> <h1 style="font-size:400%;"><strong>Du suchst eine günstige Mietwohnung in Jena?</strong></h1> </div> <div> <h3 style="font-size:200%;">Deine neue 3-Zimmer-Wohnung liegt im 20min entfernten Rothenstein</h3> </div> <br/> </header> <div class="content contentContainer" id="topContainer"> <div class="content"> <nav class="menu navbar-default"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse" aria-expanded="false" aria-controls="navbar"> <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 class="active"><a href="#topContainer">Home</a> </li> <li><a href="#details">About</a> </li> <li><a href="#footer">Download The App</a> </li> </ul> </div> </div> </nav> </div> <div id="topContainerContent"></div> </div> <div class="content contentContainer" id="details"> <p>hallo</p> </div>
单击菜单项后如何关闭Twitter Bootstrap 3折叠导航栏
[英]How to Close Twitter Bootstrap 3 Collapse Navbar upon Clicking a Menu Item
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.