Twitter Bootstrap 3 Sticky Footer

我已经使用twitter引导框架很长一段时间了，他们最近更新到版本3!

我有麻烦让粘性页脚粘到底部，我已经使用了twitter bootstrap网站提供的启动器模板，但仍然没有运气，有什么想法吗?

当前回答

你可以简单地尝试在页脚导航栏上添加一个类:

navbar-fixed-bottom

然后创建一个CSS命名为custom.css和body padding像这样..

body { padding-bottom: 70px; }

2016-08-23 06:46:52

其他回答

如果你想在类中使用自举构建页脚。你还应该写一些javascript:

$(document).ready(function(){
  $.fn.resize_footer();

  $(window).resize(function() {
    $.fn.resize_footer();
  });
 });

(function($) {

  $.fn.resize_footer = function(){
    $('body > .container-fluid').css('padding-bottom', $('body > footer').height());
  };
 });

它将通过固定的页脚防止内容重叠，并且当用户更改窗口/屏幕大小时，它将调整填充底部。

在上面的脚本中，我假设footer直接放置在body标签中，就像这样:

<body>
  ... content of your page ...
  <div class="navbar navbar-default navbar-fixed-bottom">
    <div class="container">
      <div class="muted pull-right">
        Something useful
      </div>
      ... some other footer content ...
    </div>
  </div>
</body>

这绝对不是最好的解决方案(因为JS可以避免)，但它没有任何重叠的问题，它很容易实现和响应性(高度不是硬编码在CSS中)。

2014-11-10 16:05:05

基于jk -fdrv的回答，我添加了一个.on('resize'，函数()，以确保它在每种设备和每种分辨率上都能工作:

$(window).on('resize', function() {
    if ($(document).height() <= $(window).height()) {
        $('footer').addClass("navbar-fixed-bottom");
    } else {
        $('footer').removeClass("navbar-fixed-bottom");
    }
});

2016-04-27 02:01:56

# myfooter { 高度:3他们; background - color: # f5f5f5; text-align:中心; padding-top: 1 em; ｝ <页脚> < div class = "脚注" > <div class="容器流体" id="myfooter"> < div class = "行" > < div class = " col-md-12”> <p class="copy">版权所有;你的话< / p > < / div > < / div > < / div > < / div > > < /页脚

2015-01-27 16:41:20

这里有一个方法，将添加一个粘脚，不需要任何额外的CSS或Javascript，除了什么已经在Bootstrap，不会干扰你当前的页脚。

示例:Easy Sticky Footer

只需复制并粘贴到您的代码。不吵闹不混乱。

<div class="navbar navbar-default navbar-fixed-bottom">
    <div class="container">
      <p class="navbar-text pull-left">© 2014 - Site Built By Mr. M.
           <a href="http://tinyurl.com/tbvalid" target="_blank" >HTML 5 Validation</a>
      </p>

      <a href="http://youtu.be/zJahlKPCL9g" class="navbar-btn btn-danger btn pull-right">
      <span class="glyphicon glyphicon-star"></span>  Subscribe on YouTube</a>
    </div>
</div>

2015-02-21 16:59:31

使用flex!确保在HTML中使用body和main，这是最好的解决方案之一(除非你需要IE9支持)。它不需要固定的高度或类似的东西。

这也推荐用于Materialize !

body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

main {
    flex: 1 0 auto;
}

2017-05-11 19:54:54

Twitter Bootstrap 3 Sticky Footer

推荐文章

最新文章

标签