twitter-bootstrap 如何在 Bootstrap 3 中使页脚成为整个窗口的宽度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19661833/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make footer the width of the full window in Bootstrap 3?
提问by user2512696
I have been trying to get the footer on my page to go the full width of the window (like the navbar) while being static on the page, but haven't been able to figure out how to do so.
我一直试图让我的页面上的页脚在页面上保持静态时进入窗口的整个宽度（如导航栏），但一直无法弄清楚如何做到这一点。
How can you do this? I've tried both:
你怎么能做到这一点？我都试过：
<div class="footer">
<p>This is a footer</p>
</div>
and
和
<div class="navbar navbar-static bottom">
<p>This is a static navbar</p>
</div>
but neither of them runs the fill width of the page, rather they have margins on each side. How is it possible to change that without messing up the responsive resizing in bootstrap?
但它们都没有运行页面的填充宽度，而是每边都有边距。如何在不搞乱引导程序中的响应式调整大小的情况下改变它？
回答by Alex
If you take a look at the bootstrap documentation site: http://getbootstrap.com, you can see what navbar classes they are using to achieve the effect youre describing. They have something like:
如果您查看引导程序文档站点：http: //getbootstrap.com，您可以看到他们使用哪些导航栏类来实现您所描述的效果。他们有类似的东西：
<div class="navbar navbar-fixed-bottom">
</div>
The navbar div itself shouldnt be wrapped in any containers to avoid adding a margin.
导航栏 div 本身不应包裹在任何容器中，以避免添加边距。
回答by Nitish
Try this :
试试这个 ：
<footer>
<div class="footer">
<div class="container narrow row-fluid">
<div class="span4">
</div>
<div class="span3">
</div>
<div class="span5">
</div>
</div>
</div>
</footer>
Add background-color to class .footerto see the effects
将背景颜色添加到类.footer以查看效果
回答by WitVault
It is quite late to answer this question but in case you are using bootstrap 3.0 and above
回答这个问题已经很晚了，但如果您使用的是 bootstrap 3.0 及更高版本
<footer class="section section-primary">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
</div>
<div class="col-sm-6">
</div>
</div>
</div>
</footer>
回答by FragaGeddon
<footer>
<div class="container">
<div class="row">
<div class="col-sm-12">
This is your footer!
</div>
</div>
</div>
</footer>
