부트스트랩에서 줄 간격을 설정하는 방법

예를 들어 Bootstrap 프레임워크 레이아웃을 기반으로 하는 다음 HTML 코드는 각 줄 사이에 간격(패딩 또는 여백)을 추가해야 합니까? 에디토리얼 #새 스타일 클래스를 추가하고 margin-top 스타일을 정의합니다. 예:

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

그런 다음 행이 있는 div 요소에 스타일 클래스를 추가합니다. 예:

.top-buffer { margin-top:20px; }

#🎜🎜 #옵션 2

다음과 같은 몇 가지 일반적인 위쪽 여백 스타일 클래스를 정의합니다.

<div class="row top-buffer"> ...</div>

그런 다음 div에 적절하게 추가합니다. 행이 있는 요소 CSS 스타일 클래스:

.top5 { margin-top:5px; }
.top7 { margin-top:7px; }
.top10 { margin-top:10px; }
.top15 { margin-top:15px; }
.top17 { margin-top:17px; }
.top30 { margin-top:30px; }

Option 3

Bootstrap 4에서는 내장된 간격 스타일 클래스(자세한 ​​내용 참조)는 여기에서 확인하세요. 예:

<div class="row top7"></div>

위 내용은 부트스트랩에서 줄 간격을 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!