답변:
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
.top-buffer { margin-top:20px; }와는 어떻게 다른 .top30 { margin-top:30px; }가요? 글쎄요, 어떤 개발자의 입장에서도 : 그것은 동일합니다. 유스 케이스에 맞는 adjustemts는 여기에 포함되지 않습니다. OP가 자신의 질문에 대답 한 경우 특히 그렇지 않습니다.
부트 스트랩에서 행을 분리해야하는 경우 간단히 사용할 수 있습니다 .form-group. 행 맨 아래에 15px 여백이 추가됩니다.
귀하의 경우, 마진을 높이기 위해이 클래스를 이전 .row요소에 추가 할 수 있습니다
<div class="row form-group">
/* From bootstrap.css */
.form-group {
margin-bottom: 15px;
}
내장 간격 클래스를 사용할 수 있습니다
<div class="row mt-3"></div>클래스 이름의 "t"는 "맨 위"쪽에 만 적용되며 아래쪽, 왼쪽, 오른쪽에 대해 유사한 클래스가 있습니다. 숫자는 공간 크기를 정의합니다.
form-group여전히 존재 하지만 작업을 수행 할 수 있고 더 많은 옵션이있는 여백 / 패딩에 대한 특수 클래스가 추가되었습니다.
mt-3그렇게 사용되지 않습니다form-group
들면 부트 스트랩 4 간격하여 적용되어야
속기 유틸리티 클래스
다음 형식으로 :
{property} {sides}-{size}
어디 속성 중 하나입니다 :
어디 측면 중 하나입니다 :
어디 크기 중 하나입니다 :
따라서 다음 중 하나를 수행해야합니다.
<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로 바꿔서 사용하십시오.
<div class="row margin-top-20">오버 의 장점은 무엇입니까 <div class"row" style="margin-top: 2.0em">?
부트 스트랩 4에 다음 클래스를 사용할 수 있습니다.
mt-0
mt-1
mt-2
mt-3
mt-4
...
margin-top의 부트 스트랩 4 알파 : 짧은 CSS 클래스 이름 mt-1, mt-2 (mt-lg-5, mt-sm-2)는 오른쪽, 왼쪽, 왼쪽과 동일하며 자동 클래스 ml- 자동
<div class="mt-lg-1" ...>단위는 출신 1에 5: 당신은 MT-1이 여백 상단의 .25rem을 제공 설정하면 수단 variables.scss에.
$spacers: (
0: (
x: 0,
y: 0
),
1: (
x: ($spacer-x * .25),
y: ($spacer-y * .25)
),
2: (
x: ($spacer-x * .5),
y: ($spacer-y * .5)
),
3: (
x: $spacer-x,
y: $spacer-y
),
4: (
x: ($spacer-x * 1.5),
y: ($spacer-y * 1.5)
),
5: (
x: ($spacer-x * 3),
y: ($spacer-y * 3)
)
) !default;더 읽기 여기
https://v4-alpha.getbootstrap.com/utilities/spacing/#horizontal-centering
.css 파일에서이 클래스에 추가하십시오.
.row {
margin-left: -20px;
*zoom: 1;
margin-top: 50px;
}또는 새로운 클래스를 만들어 요소에 추가하십시오.
.rowSpecificFormName td {
margin-top: 50px;
}just take a new class beside every row and apply css of margin-top: 20px;
here is the code below
<style>
.small-top
{
margin-top: 25px;
}
</style>
<div class="row small-top">
<div class="col-md-12">
</div>
</div>부트 스트랩 3
CSS (여백없이 여백 만) :
.row.row-gutter {
margin-bottom: -15px;
overflow: hidden;
}
.row.row-gutter > *[class^="col"] {
margin-bottom: 15px;
}CSS (동일한 여백 15px / 2) :
.row.row-margins {
padding-top: 7px; /* or margin-top: 7px; */
padding-bottom: 7px; /* or margin-bottom: 7px; */
}
.row.row-margins > *[class^="col"] {
margin-top: 8px;
margin-bottom: 8px;
}용법:
<div class="row row-gutter">
<div class="col col-sm-9">first</div>
<div class="col col-sm-3">second</div>
<div class="col col-sm-12">third</div>
</div>(SAS 또는 LESS 15px에서 부트 스트랩의 변수가 될 수 있음)
<div class="row row-padding">간단한 코드
bs3-upgrade간격과 텍스트 정렬 에이 도우미를 사용하면됩니다 .
BootStrap 3.3.7을 사용하는 경우 NPM을 통해 오픈 소스 라이브러리 부트 스트랩 스페이서를 사용할 수 있습니다
npm install bootstrap-spacer또는 github 페이지를 방문하십시오 :
https://github.com/chigozieorunta/bootstrap-spacer다음은 .row-spacer 클래스를 사용하여 행 간격을 조정하는 방법의 예입니다.
<div class="row row-spacer">
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
</div>
<div class="row row-spacer">
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
</div>열 사이에 공백이 필요한 경우 .row-col-spacer 클래스를 추가 할 수도 있습니다.
<div class="row row-col-spacer">
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
</div>또한 다양한 .row-spacer 및 .row-col-spacer 클래스를 함께 결합 할 수 있습니다.
<div class="row row-spacer row-col-spacer">
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
</div>