html - Bootstrap 3页脚问题

Question

我正在尝试获取一个页脚，如果没有足够的内容，它会粘在浏览器的底部，或者如果有足够的内容超过浏览器的高度，它会粘在页面的底部。是否存在一个

.navbar-static-bottom

bootstrap3 中的类？

另外，我在设置页脚样式时遇到了一些问题。我想要左边的链接，右边的一些纯文本。这个jsfiddle与我想要的相反。我不认为 pull-right 和 pull-left 是理想的解决方案。这似乎有点hacky。我将按钮更改为向左拉，将文本更改为向右拉，当窗口被压缩时，它只给出了（几乎）正确的外观。边距已经关闭。

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;
}