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' ）添加到顶部（ 't' ）小（ ' - sm' ）尺寸屏幕的div。我还希望它是默认间距（ ' - 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"小组已被删除，小组正在提供伪人力资源及其下方的保证金/填充。

因为它现在正在使用卡片，我认为你已经失去了额外的css格式，而这只是在前一张卡片周围应用边距的情况。

请注意：“避免边缘顶部。垂直边距会崩溃，产生意外结果。” Boostrap Reboot Approach