Twitter bootstrap 引导页脚，页面全宽
我正在用joomla设计一个网站，并使用bootstrap框架。 现在我的页脚有个问题。基本上，我使用一个简单的网格布局，我希望网站的内容部分位于页面的中心，左右两侧都有空间，我已经做到了这一点。 现在我希望页脚不要像内容一样在中间，而是在页面的末尾，在整个宽度上，而不是固定的。因此，我通常希望向下滚动页面，在页面末尾，页脚将显示为全宽。 我找了很长时间，但没有找到任何有效的解决方案。 我希望有人能帮我实现它 下面是php页面的脚本和我使用的css文件 index.phpTwitter bootstrap 引导页脚，页面全宽,twitter-bootstrap,footer,Twitter Bootstrap,Footer,我正在用joomla设计一个网站，并使用bootstrap框架。 现在我的页脚有个问题。基本上，我使用一个简单的网格布局，我希望网站的内容部分位于页面的中心，左右两侧都有空间，我已经做到了这一点。 现在我希望页脚不要像内容一样在中间，而是在页面的末尾，在整个宽度上，而不是固定的。因此，我通常希望向下滚动页面，在页面末尾，页脚将显示为全宽。 我找了很长时间，但没有找到任何有效的解决方案。 我希望有人能帮我实现它 下面是php页面的脚本和我使用的css文件 index.php <!DOCTYP
<!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>
oodoloo您可以将页脚放在主内容容器后的
<div class="container">
...
</div>
<div id="footer" class="container-fluid">
<div class="row">....</div>
</div>
...
....
出于完整性考虑，我添加了“right:0”。不知道其他浏览器是否需要它。在这里，它也可以在没有它的情况下工作。我这样做是正确的：
@media(max-width:500px){
.footer{
float:left;
width:109%;
margin-left:-5%;
}
}
我也有同样的问题，无法让我的页脚跨过整个页面的宽度。我使用Chrome开发工具查看是什么阻止了页脚的扩展。我发现问题在于我在哪里使用了“Container”类。它每次都会添加填充，由于某种原因，页脚将无法跨越页面上的填充，即使它位于单独的div中。我将container div更改为具有“container fluid”类，并删除了CSS中“container fluid”类的填充。页脚现在可以工作了，容器仍然响应。我不得不手动调整一些元素，这些元素需要额外的填充来进行我的造型。不确定这是否是正确的解决方案，但它满足了我的需要 谢谢你的快速回复！我试过这个，但这还不足以满足我的需要。现在我不知道我如何才能做到，div填写了整个页面。当我设置固定宽度时，div只会放大到右侧，左侧已经从内容开始的点开始。你能再帮我一次吗？你能创建一个在jsfiddle.net或codepen.io上共享的独立且可重复的示例吗？除非您可以阅读和编辑实际代码，否则不需要太多的努力，只能给出一般性的建议。对于结尾的页脚，我希望实现我在第一篇文章中描述的结果。希望这有助于解决问题。为了复制我在上一条评论中描述的内容，您必须添加到页脚css中，例如“宽度：800px”或“宽度：1500px”。@Mikkoohtama是正确的。这确实实现了OP中所述的全宽页脚。在oodoloo提供的小提琴中，页脚div不正确地位于主contaner div中…这就是为什么它不工作的原因-它需要在外部。容器流体页脚中的行很重要，因为这将删除引导添加到容器流体中的15px左右填充。
.footer
{
height: 50px;
background-color: black;
position: absolute;
left: 0;
right: 0;
width: 100%;
}
@media(max-width:500px){
.footer{
float:left;
width:109%;
margin-left:-5%;
}
}