부트 스트랩 3 열 간격이 균등하지 않음

부트 스트랩 3 열 디자인을 구현할 때 부트 스트랩 CSS가 왼쪽 및 오른쪽 패딩 = 15px로 col-md-4를 정의하기 때문에 열 사이에 간격이 불규칙합니다.부트 스트랩 3 열 간격이 균등하지 않음

그래서 중간의 열은 이중 패딩을 얻습니다. 따라서 간격은 15px가 아니라 30px입니다.

다음은 의미하는 그림입니다. 동일한 간격을 만들 수있는 방법이 있습니까? 그렇다면 모바일 장치 크기로 전환 한 후에도 간격이 유지 되었습니까?

바탕 화면 모드에서 잘 작동 할 수

.col-md-4 { padding-left: 15px; padding-right: 15px; } 
.col-md-4:first-child { padding-left: 15px; padding-right: 0px; } 
.col-md-4:last-child { padding-left: 0px; padding-right: 15px; }

같은 것을 가지고 있지만, 모바일 응답 모드에서, 왼쪽 열은 바로 패딩 누락되고, 오른쪽 열에는 왼쪽 패딩을 누락됩니다

출처

2016-09-22 monstro

.col-md-4:nth-child(2) {padding-left: 7.5px;padding-right: 7.5px;}

이 모든 트리 열에 대해 동일한 패딩을 사용하는 것이 더 적합하거나 동일한 패딩을 사용하려는 경우 30px라면 문제가되지 않습니다. 열 밖에 행을 제거하거나 열 밖에 .col-md-12를 넣을 수 있습니다.

출처

2016-09-26 08:01:43

그러나 스마트 폰 모드에서는 모두 상자가 세로로 정렬됩니다. 왼쪽 및 오른쪽 상자 만 패딩 = 15이지만 중간 상자는 패딩 = 7.5, 스마트 폰에서 – monstro

이 아닙니다. 열을 변경하면 col-xs-12 또는 col-sm-12를 추가 할 수 있습니다. 귀하의 열에는 동일한 패딩이 있어야합니다. –

부트 스트랩 3 열 간격이 균등하지 않음

답변

관련 문제