부트 스트랩 배경 너비 패딩

Question

Boostrap 3을 사용 중이며 너무 넓게 보이는 요소의 배경에 문제가 있습니다. 컨테이너는 데스크톱 모드 1170px이며 내용을 1140px 너비로 표시하도록 왼쪽 및 오른쪽으로 15px 패딩이 있습니다.

배경색이 다른 요소를 추가 할 때 (body + .container가 모두 동일한 배경을 가짐), 패딩 영역에 배경이 표시되어 요소가 1170px 너비로 표시됩니다.

문제를 해결하기 위해 각 화면 너비에서 배경이 다른 각 요소에 대해 CSS를 추가 할 수 있습니다 (미디어 쿼리). 그러나 나는이 문제를 가진 유일한 사람이 될 수 없기 때문에 이것을 달성하는 더 좋은 방법이 있기를 바랍니다. 누구든지이 문제를 해결하기 위해 Boostrap 클래스/함수를 알고 있습니까? 아니면 이에 대한 몇 가지 모범 사례를 알고 있습니까?

Answer 1

행 및/또는 내부 내용을 래핑 해보면 어떻게 작성했는지 확인할 수 있습니다. 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; 
}