Twitter Bootstrap - 全寬背景（圖片）

我現在正在一個項目上，我正在嘗試包括響應式網格在內的真棒Twitter Bootrtrap。除了一個問題之外，所有的作品都很好，很漂亮。Twitter Bootstrap - 全寬背景（圖片）

你如何給.container（它擁有網格）背景色？例如：

<div class="container green"> 
    <div class="row"> 
     <div class="span6"> 
      <p>This is a test</p> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="span6"> 
      <p>This is a test</p> 
     </div> 
    </div> 
</div> 

.green{ 
background:green; 
}

當我添加顏色到容器它會變成綠色，但留下了保證金左側，大約20像素。我如何實現全角背景？

來源

2012-04-05 Michael

那你看到的保證金是由於該網格系統的.row類部分去除20px的左邊，以適應各行內span類;該類內容如下：

.row { 
    margin-left: -20px; 
}

您可以只用您選擇的背景色另一個容器中，像這樣包裝一下你.container DIV規避：

HTML

<div class="green"> 
    <div class="container"> 
     <div class="row"> 
      <div class="span6"> 
       <p>This is a test</p> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="span6"> 
       <p>This is a test</p> 
      </div> 
     </div> 
    </div> 
</div>

CSS

.green{ 
    background:green; 
}

來源

2012-04-05 19:22:48

thx @Andres的幫助。這種解決方案的工作原理，但這也導致了一個完整的背景，跨越了內在的屏幕，而不是隻有內部的容器。我無法用寬度atribute包裝color div，因爲.container響應迅速，因此寬度變化很大。 – Michael 2012-04-06 09:58:19

@Michael作爲其他發佈者建議您需要提供更多信息給您的案例或工作演示如http://jsfiddle.net，所以我們可以看一看並做出適當的回答。 – 2012-04-06 14:54:29

嘗試

body { 
    background-color: green; 
} 

.container { 
    background-color: transparent; 
}

來源

2012-04-05 16:57:38 AlienWebguy

會工作，但在我的情況下不是一個選項，這會干擾項目中的其他對象。 – Michael 2012-04-05 17:02:42

+10

我們應該如何根據您提供的代碼知道這一點？如果你有限制，他們需要披露。 – AlienWebguy 2012-04-05 17:05:38

試試這個，它爲我工作，這樣包裝你的代碼。

<div class="rowWrp"> 
    <div class="row colorBg"> 
     <div class="span6"> 
      <p>This is a test</p> 
     </div> 
    </div> 
</div>

CSS是：

.colorBg { 
    background:red; 
    } 

.rowWrp { 
    background:red; 
    width:940px; 
    padding-right:20px; 
    }

這裏我假設我們使用固定的版面。

來源

2013-04-01 04:33:47 amrinz

Twitter Bootstrap - 全寬背景（圖片）

回答

相關問題