부트 스트랩 - 두 행 맞추기/패딩

Question

트위터 부트 스트랩이 포함 된 반응 형 웹 페이지를 만들고 싶습니다. 나는 너비가 같아야하고 배경색이있는 바를 왼쪽 너비와 오른쪽 너비에 정렬해야합니다.

http://codepen.io/anon/pen/thsgC

이 나를 혼란 : 부트 스트랩으로

내가이 영향을 padding-left:-15px; padding-right:-15px; 사용합니다. 부트 스트랩 자신의 CSS 클래스를 덮어 쓰지 않고 두 행을 부트 스트랩에 맞게 정렬하는 방법은 무엇입니까? .row 및 .col-xs-12

감사합니다.

Answer 1

부트 스트랩에서 col-* 클래스에는 패딩이 있습니다. 이를 해결하기 위해서는 당신도 (권장하지 않음)을 무시하거나 다른 사업부 내부의 배경 색 사업부를 배치 할 수 있습니다 : 사실 두 행이 올바르게 정렬이 http://codepen.io/anon/pen/ixcmg

Answer 2

처럼

<div class="col-xs-12"> 
    <div class="navigation">color</div> 
</div> 

합니다. , navigation 클래스는이

같은 col-xs-12의 하위 요소에 navigation 클래스를 넣어 col-xs-12 요소

시도가 동일한 div 요소에 두 번째 행에있는 동안 문제는 첫 번째 행에, 이미지 요소는 col-xs-12 요소의 자식입니다

<div class="row"> 
    <div class="col-xs-12"> 
     <div class = "navigation"> 
      color 
     </div> 
    </div> 
</div> 

부트 스트랩 자신의 클래스를 덮어 쓰는 것이 좋지 않은 경우 부트 스트랩 CSS 속성 값을 덮어 쓰는 데 사용해야하는 요소에 여분의 클래스를 제공 할 수 있습니다.