如何在twitter引導的容器內有100％寬度的背景？

Question

我目前正在建立一個wordpress網站，我需要一個div的100％寬度的背景（css顏色，沒有圖像）。我的div在一個容器內，我不能修改html。所以，我想知道是否有任何方式與CSS來做到這一點。我已經嘗試了填充+邊距黑客，但它沒有奏效。

HTML：

<div class="container"> 
<div class="row-fluid"> 
    <div class="main span12"> 
     <div class="row-fluid blue"> <!--this is the div that needs the background--> 
      <div class="span4">some content</div> 
      <div class="span4">some content</div> 
      <div class="span4">some content</div> 
      </div> 
     <div class="row-fluid"> 
      <div class="span12"> some other content, doesn't need the background</div> 
     </div> 
    </div> 
    </div> 
    </div> 

任何幫助深表感謝。我試過這個：http://www.sitepoint.com/css-extend-full-width-bars/但它沒有工作。

Answer 1

基於這篇文章從CSS技巧（Full Width Browser Bars）。

HTML

<div class="container"> 
    <div class="level"></div> 
    <div class="level purple"></div> 
    <div class="level"></div> 
</div> 

CSS

html, body { 
    overflow-x: hidden; 
} 
.container { 
    width:960px; 
    margin: 0 auto; 
    border:1px solid black; 
} 
.level { 
    height:100px; 
    background: #bada55; 
} 

.purple { 
    position: relative; 
    background: #663399; 
} 

.purple:before, 
.purple:after { 
    content: ""; 
    position: absolute; 
    background: #663399; /* Match the background */ 
    top: 0; 
    bottom: 0; 
    width: 9999px; /* some huge width */ 
} 
.purple:before { 
    right: 100%; 
} 
.purple:after { 
    left: 100%; 
} 

Codepen Demo

支持應該是IE8 &了