Question

如果没有足够的内容，我试图获得一个会粘在浏览器底部的页脚，或者如果有足够的内容超出浏览器的高度，则会粘到页面底部。

是否存在？

.navbar-static-bottom

bootstrap3中的

类？

另外，我在设置页脚样式时遇到了一些问题。我想要左边的链接，右边的一些明文。 This jsfiddle与我想要的完全相反。我不认为拉右和拉左是理想的解决方案。这看起来有点像hacky。我改变按钮向左拉，文本向右拉，当窗口缩小时，它只给出了（差不多）正确的外观。 ideal 但边距是关闭的。

Answer 1

如果您希望将页脚固定在底部，可以使用 .navbar-fixed-bottom 类。

如果您需要粘性页脚，可以试试这个

<div id="wrap">
<div id="main" class="container clear-top">
<div class="row">
<div class="span12">

</div>
</div>
</div>
</div>
<footer class="footer" style="background-color:#c2c2c2">
 </footer>

CSS:
html,body
{
height:100%;
}

#wrap
{
min-height: 100%;
}

 #main
 {
overflow:auto;
padding-bottom:150px; /* this needs to be bigger than footer height*/
}

footer { position: relative; margin-top: -150px; /* negative value
of footer height */ height: 150px; clear:both; padding-top:20px;
color:#fff; }

在此处找到http://bootstrapfooter.codeplex.com/

Answer 2

我使用一点JavaScript完成了这个：

$(window).bind('load', function () {

    resizeElements();

    function resizeElements() {

        headerHeight = $('.navbar').height();
        footerHeight = $('footer').height();

        if (($(document.body).height() + footerHeight) < $(window).height()) {
            $footer.addClass('navbar-fixed-bottom');
        } else {
            $footer.removeClass('navbar-fixed-bottom');
        }
    }

    $(window).resize(resizeElements);

});

这允许我避免任何换行类。

Answer 3

我使用此代码对我有用：

<强> HTML

<div class="container" id="footer"> 
    <footer> 
           <div class="row">
                    <div class="col-lg-12">
                                      &copy; 2013 

                                      <br>
                                      Powered by 
                                      <a href="http://getbootstrap.com title="Bootstrap">Bootsrap</a>
                                      &middot;
                                     <a href="http://fortawesome.github.io/Font-Awesome/" title="Fontawesome">Fontawesome</a>
                       </div>   
        </div>
      </footer>
</div>

<强> CSS

    #footer{
        position:relative;
        bottom:0;
        background-color:@navbar-inverse-bg;
        border-color:@navbar-inverse-border;

    color:@navbar-inverse-color;
}

Bootstrap 3页脚问题

3 个答案: