부트 스트랩 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-auto
row
향후 개발자가이 문제를 디버깅하는 경우 :
부트 스트랩은 행 열의 패딩을 설정하므로 행 내용이 컨테이너 외부에 나타나지 않아야합니다. 이 문제가 발생하고 col -... 클래스를 사용하여 부트 스트랩의 그리드 시스템을 올바르게 사용하는 경우 열의 패딩을 재설정하는 추가 CSS가있을 수 있습니다.
'Programming' 카테고리의 다른 글
자동 레이아웃을 사용하여 UICollectionView에서 셀의 하나의 차원 지정 (0) | 2020.08.03 |
---|---|
어플리케이션 서버와 서블릿 컨테이너의 차이점은 무엇입니까? (0) | 2020.08.03 |
달러 가치가 주어지면 동전의 모든 조합을 찾는 방법 (0) | 2020.08.03 |
Go와 비교하여 왜 느린가 (Java와 비교)? (0) | 2020.08.03 |
Google Maps API V3-정확히 같은 지점에 여러 마커 (0) | 2020.08.03 |