Boostrap 4間距，爲什麼按鈕不像第3版那樣有垂直空間？

Question

3版佈局（https://plnkr.co/edit/XDA9EwMAzH4xDSfZaXvS?p=preview）

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

<div class="container"> 
    <h1>Confirm your details</h1> 
    <div class="row"> 
    <div class="col"> 
     <div class="card"> 
     <div class="card-block"> 
      <h4 class="card-title">We need to confirm your current address details and contact information.</h4> 
      <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> 
     </div> 
     </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> 

爲什麼按鈕沒有垂直空間，我應該如何將它添加到Bootstrap v4中？

Answer 1

找到了答案：

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

基本上，他們增加了符號添加邊距和填充，這樣就可以增加取決於屏幕的大小不同的量。例如，我要添加餘量（'M'）到div的頂部（'T'）爲小（'-sm'）大小的屏幕。我也希望它成爲默認的間距（「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

Answer 2

根據此鏈接"Migrating to v4 - Bootstrap 4"面板已被刪除，它是面板提供僞HR和其下的邊距/填充。

因爲它現在使用卡片，我以爲你已經失去了額外的CSS格式，它只是在前面的卡片上應用邊距的情況。

請注意：「避免使用margin-top，垂直margin可能會崩潰，產生意想不到的結果。」 Boostrap Reboot Approach