[twitter-bootstrap] Twitter Bootstrap을 사용하여 수직 공백을 추가 하시겠습니까?

에서 부트 스트랩 4 가 간격 Utilites (유틸리티)가 .

사용 된 표기법에 대한 문서 인용 :

에서 모든 중단 점에 적용 간격 유틸리티 xs로는 xl, 그들에는 중단 점의 약어가 없습니다. 이는 해당 클래스가 적용되어 min-width: 0미디어 쿼리에 의해 바인딩되지 않기 때문입니다. 그러나 나머지 중단 점에는 중단 점 약어가 포함됩니다.

클래스는 형식을 사용하여 지정됩니다 {property}{sides}-{size}에 대한 xs
및 {property}{sides}-{breakpoint}-{size}대한 sm, md, lg,와 xl.

어디 속성 중 하나입니다 :

• m -설정된 수업 margin
• p -설정된 수업 padding

어디 측면 중 하나입니다 :

• t– margin-top또는padding-top
• b– margin-bottom또는padding-bottom
• l– margin-left또는padding-left
• r– margin-right또는padding-right
• x– 클래스를 설정하는 것이 모두 *-left와*-right
• y– 클래스를 설정하는 것이 모두 *-top와*-bottom
• 공백- 요소의 4면 margin또는 padding모두 를 설정하는 클래스 의 경우

어디 크기 중 하나입니다 :

• 0 -여백 또는 패딩을 제거하여 제거하는 클래스의 경우 0
• 1– 설정이 클래스 (기본적으로)이 margin나 padding에$spacer * .25
• 2– 설정이 클래스 (기본적으로)이 margin나 padding에$spacer * .5
• 3– 설정이 클래스 (기본적으로)이 margin나 padding에$spacer
• 4– 설정이 클래스 (기본적으로)이 margin나 padding에$spacer * 1.5
• 5– 설정이 클래스 (기본적으로)이 margin나 padding에$spacer * 3

따라서 요소 위아래에 여분의 수직 공간을 확보하려면 my-5클래스를 사용하십시오 .

답변

<div class="col-xs-12" style="height:50px;"></div>

<div class="form-group">
    &nbsp;
</div>

.spacer { margin:0; padding:0; height:50px; }
<div class="spacer"></div>

<div class="help-block"></div>

<div class="divider-10"></div>

.divider-10 {
    width:100%;
    min-height:1px;
    margin-top:10px;
    margin-bottom:10px;
    display:inline-block;
    position:relative;
}