我通常熟悉使用css刷新页脚的技术。
但是我在将这种方法用于Twitter引导时遇到了一些麻烦，很可能是因为Twitter引导本质上是响应式的。使用Twitter引导，我不能得到页脚冲洗到页面底部使用上述博客文章中描述的方法。
当前回答
这现在包含在Bootstrap 2.2.1中。
引导3.倍
使用navbar组件并添加.navbar-fixed-bottom类:
<div class="navbar navbar-fixed-bottom"></div>
引导4.倍
<div class="navbar fixed-bottom"></div>
别忘了添加body {padding-bottom: 70px;}或以其他方式覆盖页面内容。
文档:http://getbootstrap.com/components/ # navbar-fixed-bottom
其他回答
使用下面的类将它推到页面的最后一行，也使它到页面的中心。 如果你正在使用ruby on rails HAML页面，你可以使用下面的代码。 % footer.card.text-center
请不要忘记使用twitter bootstrapp
根据Bootstrap 4.3的例子，如果你像我一样失去理智，这是它实际工作的方式:
footer div的所有父div都需要有高度:100% (h-100类) 页脚的直接父类需要有display: flex (d-flex类) 页脚需要有margin-top: auto (mt-auto类)
问题在于，在现代前端框架中，我们经常对这些元素进行额外的包装。
例如，在我的案例中，使用Angular，我用一个独立的应用根组件、应用主组件和页脚组件组成了视图——所有这些组件都将它们的自定义元素添加到DOM中。
因此，为了使它工作，我必须向这些包装器元素添加类:一个额外的h-100，将d-flex向下移动一级，并将mt-auto从页脚向上移动一级(因此实际上它不再在页脚类上，而是在<app-footer>自定义元素上)。
使用Bootstrap 5保持页脚在底部
<div class="min-vh-100 d-flex flex-column
justify-content-between">
<div> <!-- Wrapper (Without footer) -->
<header>
I am a header.
</header>
<article>
I am an article!
</article>
</div> <!-- End: Wrapper (Without footer) -->
<footer>
I am a footer.
</footer>
</div>
在CodePen中的现场演示
Note
请确保您使用以下引导类将所有内容包装在<div>或任何其他块级元素中:min-vh-100, d-flex,flex-column,justify-content-between。 确保在<div>或任何其他块级元素中包装了除页脚元素以外的所有内容。 确保您使用<footer>或任何其他块级元素来包装页脚。
代码的解释
Min-vh-100确保body元素至少延伸到屏幕的全部高度 Flex-column在保留堆叠块元素方面保持正常文档流的行为(假设主体的直接子元素确实都是块元素)。 Justify-content-between将页脚推到屏幕底部。
看看如何做同样的(保持页脚在底部)与CSS -链接
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
width: 100%;
/*Negative indent footer by its height*/
margin: 0 auto -60px;
position: fixed;
left: 0;
top: 0;
}
页脚高度匹配wrap元素的底部缩进的大小。
.footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 60px;
}
在这里，你会发现HAML (http://haml.info)的方法，导航栏在顶部，页脚在页面底部:
%body
#main{:role => "main"}
%header.navbar.navbar-fixed-top
%nav.navbar-inner
.container
/HEADER
.container
/BODY
%footer.navbar.navbar-fixed-bottom
.container
.row
/FOOTER
