twitter-bootstrap Bootstrap 页脚，页面全宽
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22970117/
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
Bootstrap Footer, Full Width Of Page
提问by oodoloo
i'm designing a website with joomla and using the bootstrap framework. Now i have a problem by my footer. Basically i use a simple grid layout and i want the content part of the site in the center of the page with space on the left and the right side which i already achieved. And now i want the footer not in the middle like the content but on the end of the page and over the whole width of it and NOT FIXED. So i want normally scroll down the page and at the end of it the footer shall appear with full width. I searched for it a long time but i don' find any solution that worked. I hope somebody can help me to achieve it...
我正在使用 joomla 设计一个网站并使用引导程序框架。现在我的页脚有问题。基本上我使用一个简单的网格布局，我希望网站的内容部分位于页面的中心，左侧和右侧的空间我已经实现了。现在我希望页脚不像内容那样在中间，而是在页面的末尾和它的整个宽度上，而不是固定的。所以我想通常向下滚动页面，在它的末尾页脚应以全宽显示。我搜索了很长时间，但没有找到任何有效的解决方案。我希望有人可以帮助我实现它...
In the following are the scripts of the php-page and the css file i used
以下是我使用的 php-page 和 css 文件的脚本
index.php
索引.php
<!DOCTYPE html>
<html>
<head>
<jdoc:include type="head" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<!-- main container -->
<div class='container'>
<!-- header -->
<div class="mainMenuTop"/>
<div class='row'>
<jdoc:include type="modules" name="position-1" style="well" />
</div>
<div class='row'>
<!-- main content area -->
<div class='span12'>
<div class="article">
<jdoc:include type="component" />
</div>
</div>
</div>
<!-- footer -->
<div class='row'>
<div class='span12'>
<div class='footer'>
<jdoc:include type="modules" name="footer" style="none" />
</div>
</div>
</div>
</div>
</body>
</html>
style.css
样式文件
body
{
overflow-y: scroll;
background: url(../images/Test.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.article
{
padding: 25px;
margin-top: 30px;
margin-bottom: 30px;
border-radius: 18px;
background: rgba(255, 255, 255, 0.5);
background: rgba(255, 255, 255); /* The Fallback */
font-size: 12pt;
font-family:"Calibri", Times, serif;
}
.footer
{
height: 50px;
border-top: solid 1px black;
}
Kind Regards, oodoloo
亲切的问候， oodoloo
回答by Mikko Ohtamaa
You can put your footer to separate <div class="container">after the main content container. Then you can assign a container class which does not limit the width of the footer, like happens with main content. E.g.::
您可以将页脚放在<div class="container">主要内容容器之后。然后你可以分配一个不限制页脚宽度的容器类，就像主要内容一样。例如：：
<div class="container">
...
</div>
<div id="footer" class="container-fluid">
<div class="row">....</div>
</div>
回答by oodoloo
for my needs, now i fixed it like you can see here: jsfiddle-example
根据我的需要，现在我修复了它，就像你在这里看到的一样： jsfiddle-example
.footer
{
height: 50px;
background-color: black;
position: absolute;
left: 0;
right: 0;
width: 100%;
}
I have added "width: 100%", "position: absolute", "left: 0" and "right:0" to the css-class ".footer". I think decisive was the "position: absolute". Then i have to add the "left: 0" because the left side doesnt take the fullsize. after adding this it does. The "right: 0" i added, because of completeness. Doesnt know if it is needed in any other browser. Here it works also without it.
我在css类“.footer”中添加了“width: 100%”、“position: absolute”、“left: 0”和“right:0”。我认为决定性的是“位置：绝对”。然后我必须添加“左：0”，因为左侧没有全尺寸。添加后它确实如此。由于完整性，我添加了“正确：0”。不知道其他浏览器是否需要它。在这里它也可以在没有它的情况下工作。
回答by Cristian
I do this and it is right:
我这样做是正确的：
@media(max-width:500px){
.footer{
float:left;
width:109%;
margin-left:-5%;
}
}
