我已经使用twitter引导框架很长一段时间了,他们最近更新到版本3!
我有麻烦让粘性页脚粘到底部,我已经使用了twitter bootstrap网站提供的启动器模板,但仍然没有运气,有什么想法吗?
我已经使用twitter引导框架很长一段时间了,他们最近更新到版本3!
我有麻烦让粘性页脚粘到底部,我已经使用了twitter bootstrap网站提供的启动器模板,但仍然没有运气,有什么想法吗?
当前回答
只需将类navbar-fixed-bottom添加到页脚。
<div class="footer navbar-fixed-bottom">
其他回答
基于jk -fdrv的回答,我添加了一个.on('resize',函数(),以确保它在每种设备和每种分辨率上都能工作:
$(window).on('resize', function() {
if ($(document).height() <= $(window).height()) {
$('footer').addClass("navbar-fixed-bottom");
} else {
$('footer').removeClass("navbar-fixed-bottom");
}
});
这个问题已经被flexbox彻底解决了:
https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
HTML
<body class="Site">
<header>…</header>
<main class="Site-content">…</main>
<footer>…</footer>
</body>
CSS
.Site {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.Site-content {
flex: 1;
}
这里有一个方法,将添加一个粘脚,不需要任何额外的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>
参考官方的Boostrap3粘性页脚示例, 没有必要添加<div id="push"></div>, CSS更简单。
官方示例中使用的CSS为:
/* Sticky footer styles
-------------------------------------------------- */
html,
body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto;
/* Negative indent footer by its height */
margin: 0 auto -60px;
/* Pad bottom by footer height */
padding: 0 0 60px;
}
/* Set the fixed height of the footer here */
#footer {
height: 60px;
background-color: #f5f5f5;
}
以及基本的HTML:
<body>
<!-- Wrap all page content here -->
<div id="wrap">
<!-- Begin page content -->
<div class="container">
</div>
</div>
<div id="footer">
<div class="container">
</div>
</div>
</body>
您可以在粘脚示例的源代码中找到这个css的链接。
<!-- Custom styles for this template -->
<link href="sticky-footer.css" rel="stylesheet">
完整网址: https://getbootstrap.com/docs/3.4/examples/sticky-footer/sticky-footer.css
如果你想在类中使用自举构建页脚。你还应该写一些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中)。