Bootstrap 4, ajouter de l'espace entre deux jeux de cartes

Question

J'essaie d'ajouter de l'espace entre les deux jeux de cartes. J'utilise bootstrap 4 alpha 6. Je ne sais pas pourquoi utiliser mt-20 sur le deuxième pont de cartes ne le fera pas. Je l'ai essayé de les envelopper dans des rangées et de le faire, mais ne le fait pas non plus:

<div> 
<div class="container"> 
      <div class="card-deck"> 
       <div class="card text-center"> 
        <div class="card-block"> 
         <h4 class="card-title">Permits</h4> 
         <p class="card-text"> 
          Apply for parking permit<br /> 
          View existing permit requests<br /> 
          Activate Visitor permits<br /> 
         </p> 
        </div> 
        <div class="card-footer"> 
         @Html.ActionLink("Permits", "Index", "Home", new { Area = "Permit" }, new { @class = "btn btn-primary" }) 
        </div> 
       </div> 

       <div class="card text-center"> 
        <div class="card-block"> 
         <h4 class="card-title">Vehicles</h4> 
         <p class="card-text"> 
          View and manage your vehicles 
         </p> 
        </div> 
        <div class="card-footer"> 
         @Html.ActionLink("My Vehicles", "Index", "Vehicle", null, new { @class = "btn btn-primary" }) 
        </div> 
       </div> 

       <div class="card text-center"> 
        <div class="card-block"> 
         <h4 class="card-title">Parking Tickets</h4> 
         <p class="card-text"> 
          View your parking ticket history 
         </p> 
        </div> 
        <div class="card-footer"> 
         @Html.ActionLink("My Tickets", "Index", "ParkingTicket", null, new { @class = "btn btn-primary" }) 
        </div> 
       </div> 
      </div> 
    <div class="card-deck mt-20"> 
     <div class="card text-center"> 
      <div class="card-block"> 
       <h4 class="card-title">Funding Options</h4> 
       <p class="card-text"> 
        Add credit/debit card<br /> 
        Top up Account<br /> 
        Manage cards 
       </p> 
      </div> 
      <div class="card-footer"> 
       @Html.ActionLink("Funding Options", "Index", "Funding", null, new { @class = "btn btn-primary" }) 
      </div> 
     </div> 

     <div class="card text-center"> 
      <div class="card-block"> 
       <h4 class="card-title">Account History</h4> 
       <p class="card-text"> 
        View all financial transactions on my account 
       </p> 
      </div> 
      <div class="card-footer"> 
       @Html.ActionLink("Account transactions", "Index", "Activity", null, new { @class = "btn btn-primary" }) 
      </div> 
     </div> 
     <div class="card text-center"> 
      <div class="card-block"> 
       <h4 class="card-title">User Settings</h4> 
       <p class="card-text"> 
        Edit personal details<br /> 
        Change top-up settings<br /> 
        Change password 
       </p> 
      </div> 
      <div class="card-footer"> 
       @Html.ActionLink("Personal details", "Update", "Account", null, new { @class = "btn btn-primary" }) 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

Il n'y a pas mt-20 dans Bootstrap 4. Le Bootstrap 4 margin classes sont ...

m {} côtés - {taille}

Où taille est de 0-5, et la taille est une partie de l'unité d'espacement par défaut de 1rem

• 0 - éliminer la marge
• 1 - fixer la marge à .25rem
• 2 - fixer la marge de .5rem
• 3 - régler la marge de 1rem
• 4 - fixer la marge de 1.5rem
• 5 - fixer la marge de 3rem

, vous pouvez utiliser mt-3, mt-4, etc .. mt-5

http://www.codeply.com/go/29IGJHkqVd

Answer 2

Vous pouvez mettre un saut de ligne sous les cartes: <br />. Ou peut-être ajouter une marge inférieure sous la card-deck classe:

.card-deck{ 
    bottom-margin: 10px; 
}