Bootstrap 3 固定宽度布局，全宽页脚答案

【问题标题】：Bootstrap 3 fixed width layout, full width footerBootstrap 3 固定宽度布局，全宽页脚
【发布时间】：2014-02-12 23:35:00
【问题描述】：

我正在使用固定宽度的 Bootstrap 3。

我的页脚存在两列（左和右），每列都有不同的背景颜色。我希望页脚的内容包含在“.container”中，以便与我网站上的其他内容保持一致。

现在我不能去工作：

我想让它看起来像页脚有一个完整的宽度。所以“.container”的左边应该是一种颜色，右边应该是另一种颜色。

另外，当分辨率低于某个点时，两列应该在彼此下方移动，但背景颜色仍为全角。

看图更清楚。 picture

我的第一个想法是在“.container-wrapper”上使用背景图像，然后在移动版本上使用从中间对齐的不同背景。像这样：

CSS

.kleur {
background:url(img/test-bg.jpg);
background-repeat:repeat-y;
background-position:center; }


@media (max-width: 992px) {
.kleur {
    background:url(img/test-bg2.jpg);
    background-repeat:repeat-x;
    background-position:center; }
}

HTML

<div class="fullwidthcontainer kleur">
<div class="kleur-links" style="background:#cfcfcf; height:100%; width:100%"></div>
<div class="container">
    <div class="row">
        <div class="col-md-8" style="background:#feff8b;">  <br/><br/><br/> <br/><br/><br/>  </div>
        <div class="col-md-4" style="background:#8bd7ff;">  <br/><br/><br/> <br/><br/><br/> </div>

    </div>
</div>

Link to working example, scroll down

这适用于桌面设备，但对于移动设备，它仅适用于两列高度完全相同的情况。我真的很喜欢可变高度，但不知道如何...

大家有什么想法吗？

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

这是一个流体解决方案：

Fluid solution without backgrounds

但我宁愿有一个固定宽度的解决方案

【讨论】：