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

부트 스트랩 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로 감싸서이 문제가 해결됩니다.

---

비슷한 게시물에 대한 내 답변을 아래에서 참조하십시오.

bootstrap .row의 기본 마진 왼쪽이 -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-Row에 대해이 작업을 수행 할 필요가 없습니다 (있는 경우). 수직 스크롤 막대를 피하려면 가장 바깥 쪽 (또는 행)에
추가하십시오 . 여백을 대체하기 위해 "행"클래스를 추가하여 모든 부트 스트랩 행의 동작을 무시하지 마십시오.mx-autorow

---

향후 개발자가이 문제를 디버깅하는 경우 :

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

참고 URL : https://stackoverflow.com/questions/18969051/bootstrap-3-why-is-row-class-is-wider-than-its-container