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

Question

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

我的页脚存在两个列（左和右），每个列具有不同的背景色。 我希望将页脚的内容包装在“ .container”中，以使其与网站上其余内容保持一致。

现在这是我无法工作的事情：

我想使其看起来像页脚有一个完整的宽度。 因此，“。container”的左侧应为一种颜色，右侧为另一种颜色。

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

请参见图片，以使其更加清晰。 图片

我的第一个想法是在'.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>

链接到工作示例，向下滚动

这对于台式机来说效果很好，但对于移动设备，只有两列高度完全相同时，它才有效。 我真的很喜欢高度可变，但不知道如何...

任何人有想法吗？

Answer 1

这是一种流体解决方案：

无背景的流体解决方案

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