Bootstrap背景寬度填充

我正在使用Boostrap 3，並且出現太寬的元素背景問題。該容器處於桌面模式1170px，並具有15px的左右填充，這使內容以1140px寬度顯示。Bootstrap背景寬度填充

當我添加一個具有不同背景色的元素時（比如說body + .container都具有相同的背景），那麼元素將顯示爲1170px寬，因爲背景也顯示在填充區域中。

我可以在每個屏幕寬度（媒體查詢）背景中爲每個元素添加CSS來解決問題。但我希望有更好的辦法來達到這個目標，因爲我不能成爲唯一有這個問題的人。有誰知道一些Boostrap類/函數來解決這個問題，或者知道一些最佳實踐？

來源

2015-01-16 Josef Henryson

總結了這一切！ –

http://jsfiddle.net/w7wowg94/ –

@BradHouston - 可能是一個解決方案。雖然我改變HTML結構的可能性有限，但我也認爲使用HTML/div來改變佈局是不好的設計。如果可能，我更喜歡基於CSS /類的解決方案。 –

嘗試包裝行和/或內容，你可以看到我在這裏做了什麼; http://jsfiddle.net/w7wowg94/

HTML

<div id="master-wrap"> 
    <div class="container"> 
     <div class="wrap-class-one"> 
      <div class="row"> 
       <div class="col-md-6">Content 1</div> 
       <div class="col-md-6">Contnent 2</div> 
      </div> 
     </div> 
     <hr /> 
     <div class="row"> 
      <div class="col-md-4"> 
       <div class="inner-wrap">Content 1</div> 
      </div> 
      <div class="col-md-4"> 
       <div class="inner-wrap">Contnent 2</div> 
      </div> 
      <div class="col-md-4"> 
       <div class="inner-wrap">Contnent 2</div> 
      </div> 
     </div> 
    </div> 
</div>

CSS

#master-wrap { 
    margin: 0 auto; 
    background-color: #eee; 
    padding: 15px; 
} 
.wrap-class-one { 
    background-color: #ccc; 
    padding: 15px; 
} 
.inner-wrap { 
    padding: 15px; 
    background-color: #ccc; 
}

來源

2015-01-16 10:17:25

Bootstrap背景寬度填充

回答

相關問題