Bootstrap 열의 세로 간격 쌓임 문제를 해결하는 방법

이 글은 부트스트랩 컬럼의 세로 간격 쌓임 문제에 대한 해결책을 소개합니다. 도움이 필요한 친구들이 참고할 수 있습니다.

문제 발생

Twitter Bootstrap을 사용하는 동안 부트스트랩의 열이 쌓이기 시작하면 세로 간격 문제가 발생했습니다. 예를 들어 중간 크기 화면의 3열 레이아웃을 살펴보겠습니다. (추천 튜토리얼: Bootstrap Tutorial)

<div class="row">
    <div class="col-md-4"></div>
    <div class="col-md-4"></div>
    <div class="col-md-4"></div>
</div>

이 레이아웃을 태블릿이나 휴대폰에서 보면 모든 열이 쌓이지만 각 열이 이전 열과 직접 닿을 수 있습니다.

간단한 해결책은 각 열에 아래쪽 여백을 추가하는 것입니다.

[class*="col-"] {
    margin-bottom: 15px;
}

이 방법은 일부 경우에는 작동하지만 필요하지 않을 때는 불필요한 여백을 추가합니다.

해결 방법

이 문제를 해결하기 위해 우리는 쌓일 때 열에 상단 여백을 적용하는 새로운 CSS 클래스를 만들 수 있습니다.

.row.row-grid [class*="col-"] + [class*="col-"] {
    margin-top: 15px;}
    @media (min-width: 1200px) {
    .row.row-grid [class*="col-lg-"] + [class*="col-lg-"] {
        margin-top: 0;
    }
    }
    @media (min-width: 992px) {
    .row.row-grid [class*="col-md-"] + [class*="col-md-"] {
        margin-top: 0;
    }
    }
    @media (min-width: 768px) {
    .row.row-grid [class*="col-sm-"] + [class*="col-sm-"] {
        margin-top: 0;
    }
    }

row-grid 클래스는 열별로 상단 여백을 적용하고 미디어 쿼리는 열을 제거합니다. 필요하지 않은 경우 상단 여백.

관련 메모에서 행 사이에 세로 간격을 추가하려면 CSS에 다음 줄을 추가하세요.

.row-grid + .row-grid {
    margin-top: 15px;
    }

사용법

세로 열 간격을 활성화하려는 행에 row-grid 클래스를 추가하세요. 그냥 치세요.

rreee

위 내용은 Bootstrap 열의 세로 간격 쌓임 문제를 해결하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!