Boostrap 4 espacement, pourquoi le bouton n'a-t-il pas d'espace vertical comme dans la version 3?

Question

Version 3 layout (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> 

Version 4 disposition (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> 

Pourquoi le bouton n'a pas d'espace vertical et comment l'ajouter dans Bootstrap v4?

Answer 1

a trouvé la réponse:

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

Fondamentalement, ils ont ajouté la notation pour ajouter des marges et le remplissage de sorte que vous pouvez ajouter des quantités différentes en fonction de la taille de l'écran. Par exemple, je veux ajouter la marge ('m') vers le haut ('t') de la div pour les petits ('-SM') écrans de taille. Je veux aussi qu'il soit l'espacement par défaut (« -3 »):

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

Mise à jour plnker: https://plnkr.co/edit/LDy00Kk6eVHDq85ZqjgQ?p=preview

Answer 2

Selon ce lien "Migrating to v4 - Bootstrap 4" Les panneaux ont été supprimés, c'est le panneau qui fournit le pseudo HR et une marge/marge inférieure. Puisqu'il utilise maintenant des cartes, je pense que vous avez perdu cette mise en forme supplémentaire de CSS et il va juste s'agir d'appliquer des marges autour de la carte précédente. Attention: "Evitez les bords supérieurs, les marges verticales peuvent s'effondrer et donner des résultats inattendus." Boostrap Reboot Approach