부트스트랩에서 줄 간격을 설정하는 방법-부트스트랩 튜토리얼-php.cn

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

爱喝马黛茶的安东尼

풀어 주다： 2019-07-17 14:32:41

원래의

12252명이 탐색했습니다.

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

예를 들어 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에서는 내장된 간격 스타일 클래스(자세한 내용 참조)는 여기에서 확인하세요. 예: