Twitter 부트스트랩 - 행 사이에 맨 위 공간 추가

Twitter 부트스트랩 - 행 사이에 맨 위 공간 추가

에 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>

더 더나은응을위추수있다습니할가해성을 할 수 .margin-top:7%에 5px:D

부트스트랩 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의 경우 다음을 사용하여 간격을 적용해야 합니다.

속기공과.

다음 형식으로 표시됩니다.

{filename}{filename}-{size}

여기서 속성은 다음 중 하나입니다.

• m - 마진을 설정하는 클래스의 경우
• p - 패딩을 설정하는 클래스의 경우

여기서 변은 다음 중 하나입니다.

• t - 마진-톱 또는 패딩-톱을 설정하는 클래스의 경우
• b - 여백-바닥 또는 패딩-바닥을 설정하는 클래스의 경우
• l - 여백을 왼쪽 또는 패딩 왼쪽으로 설정하는 클래스의 경우
• r - 여백 오른쪽 또는 패딩 오른쪽을 설정하는 클래스의 경우
• x - *-left 및 *-right를 모두 설정하는 클래스의 경우
• y - *-top 및 *-bottom을 모두 설정하는 클래스의 경우
• blank - 요소의 모든 4면에 여백 또는 패딩을 설정하는 클래스입니다.

여기서 size는 다음 중 하나입니다.

• 0 - 0으로 설정하여 여백이나 패딩을 제거하는 클래스의 경우
• 1 - (기본적으로) 마진 또는 패딩을 $185 *.25로 설정하는 클래스의 경우
• 2 - (기본적으로) 마진 또는 패딩을 $198 *.5로 설정하는 클래스의 경우
• 3 - (기본적으로) 마진 또는 패딩을 $198로 설정하는 클래스입니다.
• 4 - (기본적으로) 마진 또는 패딩을 $165 * 1.5로 설정하는 클래스의 경우
• 5 - (기본적으로) 마진 또는 패딩을 $185 * 3으로 설정하는 클래스의 경우
• 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

따라서 "마진-상위 클래스" 대신 "마진-하위 클래스"를 만들어 이전 항목에 적용하는 것이 좋습니다.

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

.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>

픽셀을 선호하는 경우 원하는 대로 픽셀을 px로 변경합니다.

부트스트랩 4에는 다음 클래스를 사용할 수 있습니다.

mt-0 mt-1 mt-2 mt-3 mt-4...

참조: https://v4-alpha.getbootstrap.com/utilities/spacing/

마진 탑용 부트스트랩 4 알파: 단축 CSS 클래스 이름 mt-1, mt-2(mt-lg-5, mt-sm-2)는 아래쪽, 오른쪽, 왼쪽에 동일하며 자동 클래스 ml-auto도 있습니다.

    <div class="mt-lg-1" ...>

단위 출처1로.5변수.scss에서 mt-1을 설정하면 마진 상한이 .25rem임을 의미합니다.

$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/ #추가 정보

.css 파일에서 이 클래스에 추가합니다.

.row {
    margin-left: -20px;
    *zoom: 1;
    margin-top: 50px;
}

또는 새로운 클래스를 만들어 요소에 추가합니다.

.rowSpecificFormName td {
    margin-top: 50px;
}

부트스트랩 4 alpha+에서 당신은 이것을 사용할 수 있습니다.

class margin-bottom-5

클래스의 이름은 다음 형식을 사용합니다.{property}-{sides}-{size}

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">

간단한 코드

한 페이지에서만 변경하려면 다음 스타일 규칙을 추가합니다.

 #myCustomDivID .row {
     margin-top:20px;
 }

컨테이너의 두 번째 + 행에 대해서만 마진을 자동으로 추가하는 요령이 있습니다.

.container-row-margin .row + .row {
    margin-top: 1rem;
}

추가.container-row-margin컨테이너에 대한 결과:

전체 HTML:

<div class="bg-secondary text-white">
    div outside of the container.
</div>
<div class="container container-row-margin">
    <div class="row">
        <div class="col col-4 bg-warning">
            Row without top margin
        </div>
    </div>
    <div class="row">
        <div class="col col-4 bg-primary text-white">
            Row with top margin
        </div>
    </div>
    <div class="row">
        <div class="col col-4 bg-primary text-white">
            Row with top margin
        </div>
    </div>
</div>
<div class="bg-secondary text-white">
    div outside of the container.
</div>

공식 샘플에서 가져온 것입니다.

다음 코드를 추가할 수 있습니다.

[class*="col-"] {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

공백 및 텍스트 정렬에 이 도우미를 사용하기만 하면 됩니다.

https://github.com/studija/bs3-upgrade

부트스트랩 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>

부트스트랩 5

부트스트랩 5에서는 다음과 같은 작업을 수행할 수 있습니다.

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

여기서 X는 0(공백 없음)에서 5(공백이 많음) 사이의 숫자입니다.다양한 마진/패딩 크기와 중단점별 제어에 대한 자세한 내용은 문서를 참조하십시오.

내 트릭.그다지 깨끗하지는 않지만, 저에게는 잘 맞습니다.

<p>&nbsp;</p>

언급URL : https://stackoverflow.com/questions/10085723/twitter-bootstrap-add-top-space-between-rows