我已经使用twitter引导框架很长一段时间了,他们最近更新到版本3!
我有麻烦让粘性页脚粘到底部,我已经使用了twitter bootstrap网站提供的启动器模板,但仍然没有运气,有什么想法吗?
我已经使用twitter引导框架很长一段时间了,他们最近更新到版本3!
我有麻烦让粘性页脚粘到底部,我已经使用了twitter bootstrap网站提供的启动器模板,但仍然没有运气,有什么想法吗?
当前回答
这是一个非常简单和干净的粘性页脚,你可以在bootstrap中使用。完全响应!
HTML
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Brand" src="">
</a>
</div>
</div>
</nav>
<footer></footer>
</body>
</html>
CSS
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px;
}
footer {
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
background-color: red;
}
示例:CodePen Demo
其他回答
这个棘手的例子对我不适用。 我的解决方案:
#footer {
position: fixed;
bottom: 0;
width: 100%;
height: 3em;
}
我在这个问题上有点晚了,但我看到了这篇文章,因为我刚刚被这个问题咬伤了,最终找到了一个非常简单的方法来克服它,简单地使用导航栏与导航栏固定底部类启用。例如:
<div class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
<span class="navbar-text">
Something useful
</span>
</div>
</div>
HTH
只需将类navbar-fixed-bottom添加到页脚。
<div class="footer navbar-fixed-bottom">
如果你想在类中使用自举构建页脚。你还应该写一些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中)。
你可以简单地尝试在页脚导航栏上添加一个类:
navbar-fixed-bottom
然后创建一个CSS命名为custom.css和body padding像这样..
body { padding-bottom: 70px; }