1

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

.navbar-static-bottom

bootstrap3 中的类?

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

4

3 回答 3

0

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

于 2013-10-30T07:14:08.983 回答
0

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

});

这使我可以避免任何包装类。

于 2013-10-30T08:26:55.240 回答
0

我使用此代码对我有用:

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;
}
于 2013-10-30T08:31:57.290 回答