부트 스트랩 3-행 클래스가 컨테이너보다 넓은 이유는 무엇입니까?

방금 부트 스트랩 3을 사용하기 시작했습니다. 행 클래스가 어떻게 작동하는지 이해하는 데 어려움을 겪고 있습니다. 피할 수있는 방법이 있나요 padding-left과 padding-right?

<div class="row" style="background:#000000">           
  <div class="col-xs-4 .col-xs-offset-1">
    col
  </div>
  <div class="col-xs-2">
    col
  </div>
  <div class="col-xs-2">
    col
  </div>
  <div class="col-xs-2">
    col
  </div>
</div>

http://jsfiddle.net/petran/rdRpx/

모든 그리드 시스템에는 각 기둥 사이에 거터가 있습니다. Bootstrap의 시스템은이 거터를 만들기 위해 각 열의 왼쪽과 오른쪽에 15px 패딩을 설정합니다.

문제는 첫 번째 열의 왼쪽에 절반의 거터가 없어야하고 마지막 열의 오른쪽에 절반의 거터가 있어서는 안된다는 것입니다. 일부 그리드 시스템처럼 해당 열에 일종의 .first또는 .last클래스를 사용하는 대신 .row열 패딩과 일치하는 음수 여백을 갖도록 클래스를 설정합니다 . 이렇게하면 첫 번째 열과 마지막 열의 거터가 "당겨져"동시에 더 넓어집니다.

.row사업부는 정말 그리드 열 이외의 홀드 아무것도 사용해서는 안됩니다. 그렇다면 바이올린에서 분명한 것처럼 모든 열을 기준으로 콘텐츠가 이동하는 것을 볼 수 있습니다.

최신 정보:

내가 답변 한 후에 질문을 수정 했으므로 지금 질문하는 질문에 대한 답변은 다음과 같습니다 . .container첫 번째에 수업 추가 <div>. 작업 예를 참조하십시오 .

부트 스트랩 3.3.7에서는 .row를 .container-fluid로 래핑하여이 문제가 해결되었습니다.

유사한 게시물에 대한 아래의 내 답변을 참조하십시오.

부트 스트랩 .row의 기본 margin-left가 -30px 인 이유는 무엇입니까?

기본적으로 "row"대신 "clearfix"를 사용합니다. 음의 여백을 제외하고 "행"과 정확히 동일합니다.

컨테이너 클래스 내부에서 행 클래스를 사용했지만 여전히 문제가있었습니다. 내가 추가 할 때 margin-left: auto; margin-right: auto;받는 .row클래스는 벌금을했다.

@Michelle M.은이 답변에 대한 전체 크레딧을 받아야합니다.
그녀는 댓글 중 하나에서 말했습니다.

부트 스트랩 4에 'mx-auto'클래스를 추가하면 오버플로 문제가 해결되었습니다.

다음 div과 같이 첫 번째 요소 를 업데이트해야합니다 .

<div class="row mx-auto" style="background:#000000">

모든 Nested-Rows에 대해이 작업을 수행 할 필요가 없습니다 (있는 경우). 수직 스크롤바를 피하려면 가장 바깥 쪽 (또는 행)에
추가 mx-auto하기 만하면 row됩니다.
Margins를 대체하는 "row"클래스를 추가하여 모든 부트 스트랩 행의 동작을 재정의하지 마십시오.

이 문제를 디버깅하는 미래의 개발자 :

부트 스트랩은 행 열의 패딩을 설정하므로 행의 내용이 컨테이너 외부에 나타나지 않아야합니다. 이 문제가 발생하고 col -... 클래스를 사용하여 부트 스트랩의 그리드 시스템을 올바르게 사용하고 있다면 열의 패딩을 재설정하는 추가 CSS가있을 가능성이 큽니다.