Twitter Bootstrap을 사용하여 수직 공백을 추가 하시겠습니까?

트위터의 부트 스트랩을 사용하여 수직 공백을 추가하는 가장 좋은 방법은 무엇입니까?

예를 들어 방문 페이지를 만들고 특정 버튼 위와 아래에 약간의 빈 공백을 원한다고 가정 해 봅시다. 분명히, 나는 그 특정 버튼에 대한 특정 클래스를 만들 수 있습니다. 그러나 부트 스트랩 에는 수직 공백을 추가 하는 DRY 방법이 있어야한다고 생각 합니다.

에서 부트 스트랩 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클래스를 사용하십시오 .

v2에는 수직 공간이 많지 않으므로 사용자 정의 클래스를 고수하고 싶을 것입니다. 더 작은 높이의 경우 일반적으로 <div class="control-group">버튼 주위를 던집니다 .

줄 바꿈이 작동하지만 공간을 원할 때 나는 좋아합니다.

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

여기에 오래된 무덤을 파서 미안하지만 왜 그렇게하지 않습니까?

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

일반 양식 요소의 높이에 공백을 추가합니다.

양식의 한 줄에 약 50px (방금 검사 한 요소의 47px) 인 것 같습니다. 이것은 왼쪽 2col에 레이블이 있고 오른쪽 10col에 입력이있는 가로 형식입니다. 따라서 픽셀이 다를 수 있습니다.

광산은 기본적으로 50px이므로 여백이나 패딩이없는 높이 50px의 스페이서를 만듭니다.

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

나는 이것이 오래되었다는 것을 알고 있지만 같은 것을 찾기 위해 여기에 왔으며 Bootstrap에는 다음과 같은 상황에 매우 유용한 도움말 차단 기능이 있습니다.

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

버전 3의 경우이를 깔끔하게 수행 할 수있는 "부트 스트랩"방법이 없습니다.

A panel, a well및 a는 form-group모두 세로 간격을 제공합니다.

부트 스트랩 v4의 로드맵에 더 공식적인 수직 간격 솔루션이 있습니다.

https://github.com/twbs/bootstrap/issues/4286#issuecomment-36331550 https://github.com/twbs/bootstrap/issues/13532

나는 단순히 다양한 높이를 사용하여 div 클래스를 만들었습니다.

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

CSS는 다음과 같습니다

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

필요한 높이에 맞는 디바이더 클래스를 만드십시오.

내 트릭. 우아하지는 않지만 작동합니다.

<p>&nbsp;</p>

그냥 사용하십시오 <br/>. 나는이 질문에 대한 답을 찾고자 여기에서 사용자 JayKilleen이 제안한 간단한 줄 바꿈을 사용하지 않는 것에 대해 바보 같은 느낌을 받았습니다.

나는 이것이 오래된 것을 알고 있으며 이미 게시 된 몇 가지 좋은 솔루션이 있지만 나를 위해 일한 간단한 솔루션은 다음 CSS입니다.

<style>
  .divider{
    margin: 0cm 0cm .5cm 0cm;
  }
</style>

그런 다음 HTML에서 div를 만드십시오.

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

사용을 시도했지만 <div class="control-group">레이아웃이 변경되지 않았습니다. 수직 공간을 추가하지 않았습니다. 나를 위해 일한 해결책은 다음과 같습니다.

<ol style="visibility:hidden;"></ol>

세로 공간이 충분하지 않으면 중첩 <li>&nbsp;</li>태그 를 추가하여 더 많은 공간을 확보 할 수 있습니다 .

<form>
 <fieldset class="form-group"><input type="text" class="form-control" placeholder="Input"/></fieldset>
 <fieldset class="form-group"><button class="btn btn-primary"/>Button</fieldset>
</form>

http://v4-alpha.getbootstrap.com/components/forms/#form-controls

건조한 것 이상은 없습니다

.btn {
    margin-bottom:5px;
}