我正在为我正在设计的网站使用 Bootstrap 3。
我想要一个像这个样本一样的页脚。 样本
请注意,我不希望它 FIXED 所以 bootstrap navbar-fixed-bottom 不能解决我的问题。我只是希望它始终位于内容的底部并且具有响应性。
任何指南将不胜感激。
编辑:
对不起,如果我不清楚。现在发生的情况是,当内容主体没有足够的内容时。我的页脚向上移动,然后在底部留下一个空白空间。
这就是我现在的导航栏
<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; }
请参见下面的示例。如果页面内容较少,这会将您的页脚固定在底部,如果页面内容较多,则其行为类似于普通页脚。
* { margin: 0; } html, body { height: 100%; } .wrapper { min-height: 100%; height: 100%; margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */ } .footer, .push { height: 155px; /* .push must be the same height as .footer */ }
HTML
<div class="wrapper"> <p>Your website content here.</p> <div class="push"></div> </div> <div class="footer"> <p>Copyright (c) 2008</p> </div>
更新 :新版本的 Bootstrap 演示了如何在不添加包装器的情况下添加粘性页脚。有关详细信息,请参阅 Jboy Flaga 的回答。