부트 스트랩 3 고정 너비 레이아웃, 전체 너비 바닥 글

Question

고정 너비로 ​​부트 스트랩 3을 사용하고 있습니다.

각주의 배경색이 서로 다른 두 개의 열 (왼쪽은 &)이 있습니다. 내 바닥 글의 내용을 '.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

이 데스크톱에 대해 잘 작동하지만 두 열이 정확히 경우 모바일을 위해에만 작동 같은 높이. 나는 높이가 변하기를 정말로 좋아하지만, 어떤 생각이 들지는 않는다 ...

누구든지 어떤 생각이 드나요?

Answer 1

이 유체 솔루션입니다 :

Fluid solution without backgrounds

하지만 오히려 고정 폭 해결책을 가지고