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