Bootstrap 3 页脚问题

Question

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

.navbar-static-bottom

bootstrap3中的类？

另外，我在设计页脚样式时遇到一些问题。我想要左侧的链接，右侧的一些纯文本。 这个jsfiddle与我想要的相反。我不认为右拉和左拉是理想的解决方案。看起来有点老套。我将按钮更改为向左拉，将文本更改为向右拉，这仅在窗口压缩时给出（几乎）右侧的外观。 不过，边距已关闭。

Answer 1

我使用一点 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 2

如果您希望页脚固定在底部，可以使用 .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 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;
}