Html Bootstrap 中的固定页脚
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19330611/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Fixed footer in Bootstrap
提问by stdcerr
回答by Josh KG
To get a footer that sticks to the bottom of your viewport, give it a fixed position like this:
要获得一个粘在视口底部的页脚，请给它一个固定的位置，如下所示：
footer {
position: fixed;
height: 100px;
bottom: 0;
width: 100%;
}
Bootstrap includes this CSS in the Navbar > Placement section with the class fixed-bottom. Just add this class to your footer element:
Bootstrap 在 Navbar > Placement 部分中包含了这个 CSS 类fixed-bottom。只需将此类添加到您的页脚元素：
<footer class="fixed-bottom">
Bootstrap docs: https://getbootstrap.com/docs/4.4/utilities/position/#fixed-bottom
Bootstrap 文档：https: //getbootstrap.com/docs/4.4/utilities/position/#fixed-bottom
回答by Siddharth Chauhan
Add this:
添加这个：
<div class="footer navbar-fixed-bottom">
https://stackoverflow.com/a/21604189
https://stackoverflow.com/a/21604189
EDIT:class navbar-fixed-bottomhas been changed to fixed-bottomas of Bootstrap v4-alpha.6.
编辑：类navbar-fixed-bottom已更改fixed-bottom为 Bootstrap v4-alpha.6。
http://v4-alpha.getbootstrap.com/components/navbar/#placement
http://v4-alpha.getbootstrap.com/components/navbar/#placement
回答by Matheus Gomes
Add this:
添加这个：
<div class="footer fixed-bottom">
回答by Daniel Tero
Add z-index:-9999;to this method, or it will cover your top bar if you have 1.
添加z-index:-9999;到此方法中，否则它会覆盖您的顶部栏，如果您有1.
回答by Mr Porcupine
You can do this by wrapping the page contents in a div with the following id styling applied:
您可以通过将页面内容包装在一个 div 中并应用以下 id 样式来实现：
<style>
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -60px;
}
</style>
<div id="wrap">
<!-- Your page content here... -->
</div>
Worked for me.
为我工作。
回答by Vladimir Dimchev
You might want to check that example: http://getbootstrap.com/2.3.2/examples/sticky-footer.html
您可能想检查该示例：http: //getbootstrap.com/2.3.2/examples/sticky-footer.html
