class="row"트위터 부트 스트랩 프레임 워크를 사용하여 요소 에 여백을 추가하는 방법은 무엇입니까?

답변

Twitter 부트 스트랩에서 행을 편집하거나 재정의하는 것은 좋지 않습니다. 이는 페이지 스캐 폴딩의 핵심 부분이므로 맨 위 여백이없는 행이 필요하기 때문입니다.

이를 해결하기 위해 필요한 표준 마진을 추가하는 새로운 클래스 “top-buffer”를 작성하십시오.

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

그런 다음 상단 여백이 필요한 행 div에서 사용하십시오.

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

답변

좋아, 그때 일어난 일을 알려주기 위해 Acyra가 위에서 말한 것처럼 새로운 클래스를 사용하여 수정했습니다.

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

내가 원할 때마다 <div class="row top7"></div>

더 나은 반응을 위해 예를 들어 : D margin-top:7%대신 추가 할 수 있습니다5px

답변

부트 스트랩 3

부트 스트랩에서 행을 분리해야하는 경우 간단히 사용할 수 있습니다 .form-group. 행 맨 아래에 15px 여백이 추가됩니다.

귀하의 경우, 마진을 높이기 위해이 클래스를 이전 .row요소에 추가 할 수 있습니다

<div class="row form-group">

/* From bootstrap.css */
.form-group {
        margin-bottom: 15px;
}

부트 스트랩 4

내장 간격 클래스를 사용할 수 있습니다

<div class="row mt-3"></div>

클래스 이름의 “t”는 “맨 위”쪽에 만 적용되며 아래쪽, 왼쪽, 오른쪽에 대해 유사한 클래스가 있습니다. 숫자는 공간 크기를 정의합니다.

답변

들면 부트 스트랩 4 간격하여 적용되어야

속기 유틸리티 클래스

다음 형식으로 :

{property} {sides}-{size}

어디 속성 중 하나입니다 :

m-여백을 설정하는 클래스
p-패딩을 설정하는 클래스

어디 측면 중 하나입니다 :

t-margin-top 또는 padding-top을 설정하는 클래스
b-여백 하단 또는 패딩 하단을 설정하는 클래스
l-왼쪽 여백 또는 왼쪽 여백을 설정하는 클래스
r-오른쪽 여백 또는 오른쪽 여백을 설정하는 클래스
x-* -left 및 * -right를 모두 설정하는 클래스
y-* -top 및 * -bottom을 모두 설정하는 클래스
공백-요소의 4면 모두에 여백 또는 패딩을 설정하는 클래스의 경우

어디 크기 중 하나입니다 :

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

따라서 다음 중 하나를 수행해야합니다.

<div class="row mt-1">
<div class="row mt-2">
          ...
<div class="row mt-5">

자세한 설명 은 문서 를 읽으십시오 . 여기에 실례를 들어보십시오 .

답변

때로는 마진이 설계 문제를 일으킬 수 있습니다.

http://www.w3.org/TR/CSS2/box.html#collapsing-margins

따라서 “여백 최상위 클래스”대신 “여백 하위 클래스”를 만들어 이전 항목에 적용하는 것이 좋습니다.

부트 스트랩 가져 오기 LESS 부트 스트랩 파일을 사용하는 경우 비례 부트 스트랩 테마 공간으로 여백 하단 클래스를 정의하십시오.

.margin-bottom-xs {margin-bottom: ceil(@line-height-computed / 4);}
.margin-bottom-sm {margin-bottom: ceil(@line-height-computed / 2);}
.margin-bottom-md {margin-bottom: @line-height-computed;}
.margin-bottom-lg {margin-bottom: ceil(@line-height-computed * 2);}

답변

이 클래스들을 부트 스트랩 스타일 시트에 추가했습니다

.voffset  { margin-top: 2px; }
.voffset1 { margin-top: 5px; }
.voffset2 { margin-top: 10px; }
.voffset3 { margin-top: 15px; }
.voffset4 { margin-top: 30px; }
.voffset5 { margin-top: 40px; }
.voffset6 { margin-top: 60px; }
.voffset7 { margin-top: 80px; }
.voffset8 { margin-top: 100px; }
.voffset9 { margin-top: 150px; }

예

<div class="container">
  <div class="row voffset2">
    <div class="col-lg-12">
      <p>
        Vertically offset text.
      </p>
    </div>
  </div>
</div>

답변

이 클래스를 사용하여 상단 여백을 변경하고 있습니다.

.margin-top-05 { margin-top: 0.5em; }
.margin-top-10 { margin-top: 1.0em; }
.margin-top-15 { margin-top: 1.5em; }
.margin-top-20 { margin-top: 2.0em; }
.margin-top-25 { margin-top: 2.5em; }
.margin-top-30 { margin-top: 3.0em; }

위의 요소와 2em 간격을 갖는 요소가 필요할 때 다음과 같이 사용합니다.

<div class="row margin-top-20">Something here</div>

픽셀을 선호한다면 em을 px로 바꿔서 사용하십시오.