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

我使用固定宽度的Bootstrap 3。Bootstrap 3固定宽度布局，全宽页脚

我的页脚存在两个colums（左边&右边），每个背景都有不同的颜色。我希望我的页脚内容被包裹在'.container'中，以便与我网站上的其他内容保持一致。

现在这里是东西我不能让工作：

我想使它看起来像页脚有一个完整的宽度。因此'.container'的左边应该是一种颜色，右边是另一种颜色。

另外，当分辨率低于某一点时，两个柱面应该相互移动，但背景颜色仍为全角。

请参阅picuture以使其更加清晰。 picture

我首先想到的是用在“.container-包装”的背景图像，然后在移动版本不同的背景从中间对齐。就像这样：

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

这对于桌面工作正常，但移动如果两列具有它只能相同的高度。我真的很喜欢高度可变，但不知道如何...

任何任何想法？

来源

2014-02-11 Heyman