1

十分なコンテンツがない場合はブラウザーの下部に貼り付けられるフッターを取得しようとしています。または、ブラウザーの高さを超えるような十分なコンテンツがある場合はページの下部に貼り付けられます。存在するか

.navbar-static-bottom

ブートストラップ3のクラス?

別のメモとして、フッターのスタイル設定に問題があります。左側にリンクを、右側にプレーン テキストを配置したいと思います。この jsfiddleは、私が望むものとは正反対です。プルライトとプルレフトが理想的な解決策だとは思いません。ちょっとハッキーなようです。ボタンを左引きに変更し、テキストを右引きに変更しました。これにより、ウィンドウが圧縮されたときにのみ (ほぼ) 右の外観になりました。理想ただし、マージンはオフです。

4

3 に答える 3

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 に答える