我正在为我正在设计的网站使用 Bootstrap 3。
我想要一个像这个示例一样的页脚。Sample http://wrapbootstrap.com/preview/WB0B348C6
请注意，我不想修复它，因此 bootstrap navbar-fixed-bottom 不能解决我的问题。我只是希望它始终位于内容的底部并且具有响应能力。
任何指导将不胜感激。
EDIT:
抱歉，如果我不清楚。
现在发生的情况是当内容主体没有足够的内容时。我的页脚向上移动，然后在底部留下一个空白空间。
这就是我现在的导航栏
<nav class="navbar navbar-inverse navbar-bottom" style="padding:0 0 120px 0">
<div class="container">
<div class="row">
<div class="col-sm-4">
<h5 id='footer-header'> SITEMAP </h3>
<div class="col-sm-4" style="padding: 0 0 0 0px">
<p>News</p>
<p>contact</p>
</div>
<div class="col-sm-4" style="padding: 0 0 0 0px">
<p>FAQ</p>
<p>Privacy Policy</p>
</div>
</div>
<div class="col-sm-4">
<h5 id='footer-header'> xxxx </h3>
<p>yyyyyyyyyyyyy</p>
</div>
<div class="col-sm-4">
<h5 id='footer-header'> xxxxx </h3>
<p>uuuuuuuuuuuuuuu</p>
</div>
</div>
</div>
</nav>
CSS
.navbar-bottom {
min-height: 300px;
margin-top: 100px;
background-color: #28364f;
padding-top: 35px;
color:#FFFFFF;
}
这里有一个来自 bootstrap 的简化解决方案（您不需要创建新类）：http://getbootstrap.com/examples/sticky-footer-navbar/ http://getbootstrap.com/examples/sticky-footer-navbar/
当您打开该页面时，右键单击浏览器并“查看源代码”并打开 Sticky-footer-navbar.css 文件（http://getbootstrap.com/examples/sticky-footer-navbar/sticky-footer-navbar.css http://getbootstrap.com/examples/sticky-footer-navbar/sticky-footer-navbar.css)
你可以看到你只需要这个CSS
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
对于这个 HTML
<html>
...
<body>
<!-- Begin page content -->
<div class="container">
</div>
...
<footer class="footer">
</footer>
</body>
</html>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
