Fixed footer in Bootstrap

佐手、 提交于 2019-12-18 10:58:47

问题


I'm trying out Bootstrap and I was wondering, how I can fix the footer on the bottom without having it disappear from the page if the content is scrolled?


回答1:


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:

<footer class="fixed-bottom">

Bootstrap docs: http://v4-alpha.getbootstrap.com/components/navbar/#placement




回答2:


Add this:

<div class="footer navbar-fixed-bottom">

https://stackoverflow.com/a/21604189

EDIT: class navbar-fixed-bottom has been changed to fixed-bottom as of Bootstrap v4-alpha.6.

http://v4-alpha.getbootstrap.com/components/navbar/#placement




回答3:


Add z-index:-9999; to this method, or it will cover your top bar if you have 1.




回答4:


Add this:

<div class="footer fixed-bottom">



回答5:


You might want to check that example: http://getbootstrap.com/2.3.2/examples/sticky-footer.html



来源:https://stackoverflow.com/questions/19330611/fixed-footer-in-bootstrap

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!