2017-05-23 4 views
0

버전 3 레이아웃 (https://plnkr.co/edit/XDA9EwMAzH4xDSfZaXvS?p=preview)Boostrap 4 간격, 버전 3에서와 같이 버튼에 세로 공간이없는 이유는 무엇입니까?

Bootstrap 3 layout with margin on the button

<div class="container"> 
    <h1>Confirm your details</h1> 
    <div class="row"> 
    <div class="col-md-12"> 
     <div class="panel"> 
      <h4 class="panel-heading">We need to confirm your current address details and contact information.</h4> 
      <p class="panel-body">With supporting text below as a natural lead-in to additional content.</p> 
     </div> 
    </div> 
    </div> 
    <div class="row"> 
    <div class="col-md-12 text-right"> 
     <p> 
     <a href="#" class="btn btn-primary">Confirm</a> 
     </p> 
    </div> 
    </div> 
</div> 

버전 4 레이아웃 (https://plnkr.co/edit/LDy00Kk6eVHDq85ZqjgQ?p=preview)

Bootstrap 4 layout with no margin for the button

012,372,

버튼에 세로 공간이없는 이유는 무엇이며 어떻게 부트 스트랩 v4에 추가해야합니까?

+0

내가 설명서를 읽고 있지만,이에 대한 명확한 이유를 찾을 수 없습니다 변화. $ spacer를 조정해도 아무 것도 바뀌지 않았습니다. – Zymotik

답변

1

Boostrap Reboot Approach는 답을 찾았습니다

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

기본적으로, 그들은 추가 한 표기법을 화면의 크기에 따라 다른 금액을 추가 할 수 있도록 마진과 패딩을 추가. 예를 들어, 내가 마진을 추가 할 ('분') 작은 ('-sm') 크기의 화면에 대한 사업부의 상단 ('t')에. 나는 또한 기본 간격 ('-3'를) 할 것을 권장합니다

<div class="mt-sm-3"> <!-- footer nav --> 
    <a class="btn btn-primary" href="#">Confirm</a> 
</div> 

업데이트 plnker : https://plnkr.co/edit/LDy00Kk6eVHDq85ZqjgQ?p=preview

+1

주의 사항 : "마진 - 위쪽을 피하십시오. 세로 마진이 축소되어 예기치 않은 결과가 발생할 수 있습니다." https://v4-alpha.getbootstrap.com/content/reboot/#approach – Zymotik

0

이 링크에 따르면 "Migrating to v4 - Bootstrap 4" 패널이 삭제되었습니다. 의사 HR 및 그 아래에 여백/패딩을 제공하는 패널입니다.

이제 카드를 사용하기 때문에 추가 CSS 형식을 잃어버린 것 같아서 선행 카드 주변에 여백을 적용하는 경우 일 수 있습니다.

"경계 여백을 피하십시오. 수직 여백이 없어져 예기치 않은 결과가 발생할 수 있습니다."