在我眼中这是一个很奇怪的问题。.基本上，我要做的就是删除<h2>标记，并且页脚位于顶部而不是底部。我已经包装好代码，并且在有标题的情况下页脚也可以运行，但是一旦删除它，它就会毁了。
这是我的代码
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<!-- Bootstrap -->
<link href="inc/bootstrap.css" media="screen" rel="stylesheet">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="../../assets/js/html5shiv.js"></script>
<script src="../../assets/js/respond.min.js"></script>
<![endif]-->
的CSS
<style type="text/css">
#under-header {
height: 250px;
}
#screenshot {
margin-top: -150px;
text-align: center;
}
#features {
height: 200px;
}
#margin-50 {
margin-top: 50px;
}
#margin-100 {
margin-top: 50px;
}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
/* Negative indent footer by it's height */
margin: 0 auto -60px;
}
/* Set the fixed height of the footer here */
#push,
#footer {
height: 60px;
}
</style>
</head>
的HTML
<body>
<div class="container-fluid">
<div id="wrap">
<div class="row-fluid">
<div class="col-md-10 col-md-offset-1" id="margin-100">
<h2>Title</h2>
<div class="well"></div>
</div>
<div class="col-md-10 col-md-offset-1">
<h2>Title</h2>
<div class="well"></div>
</div>
<div class="col-md-10 col-md-offset-1">
<h2>Title</h2>
<div class="well"></div>
</div>
<div class="col-md-10 col-md-offset-1">
<h2>Title</h2>
<div class="well text-center">
<p></p>
<a class="btn btn-primary" href="#">Link</a>
</div>
</div>
</div>
<div id="push"></div>
</div></div>
<footer id="footer">
<div class="row-fluid">
<h2>IF YOUR DELETE THIS THE FOOTER IS RUNINED</h2>
<div class="well text-center">
<p></p>
</div>
</div>
</footer>
</body>
</html>
最佳答案
当我将其置于崇高状态并重新缩进时，我发现了一个额外的结尾</div>。我不确定您是否要在主容器中放置页脚，但这对我有用。我对引导程序不太熟悉。
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<!-- Bootstrap -->
<link href="inc/bootstrap.css" media="screen" rel="stylesheet">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="../../assets/js/html5shiv.js"></script>
<script src="../../assets/js/respond.min.js"></script>
<![endif]-->
<style type="text/css">
#under-header {
height: 250px;
}
#screenshot {
margin-top: -150px;
text-align: center;
}
#features {
height: 200px;
}
#margin-50 {
margin-top: 50px;
}
#margin-100 {
margin-top: 50px;
}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
/* Negative indent footer by it's height */
margin: 0 auto -60px;
}
/* Set the fixed height of the footer here */
#push,
#footer {
height: 60px;
}
</style>
</head>
<body>
<div class="container-fluid">
<div id="wrap">
<div class="row-fluid">
<div class="col-md-10 col-md-offset-1" id="margin-100">
<h2>Title</h2>
<div class="well">
</div>
</div>
<div class="col-md-10 col-md-offset-1">
<h2>Title</h2>
<div class="well">
</div>
</div>
<div class="col-md-10 col-md-offset-1">
<h2>Title</h2>
<div class="well">
</div>
</div>
<div class="col-md-10 col-md-offset-1">
<h2>Title</h2>
<div class="well text-center">
<p>testing</p>
<a class="btn btn-primary" href="#">Link</a>
</div>
</div>
</div>
<div id="push">
</div>
<footer id="footer">
<div class="row-fluid">
<div class="well text-center">
<p>sdfdsdsfsd</p>
</div>
</div>
</footer>
</div>
</body>
</html>
关于html - Bootstrap 3 Footer在没有<h2>的情况下无法正常工作，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/18584014/