Bootstrap 4, dodaj przestrzeń między dwoma taliami kart

Question

Próbuję dodać spację między dwoma talią kart. Używam bootstrapu 4 alpha 6. Nie mam pojęcia, dlaczego użycie drugiej karty na karcie przy korzystaniu z mt-20 tego nie zrobi. Próbowałem owijanie ich w rzędach i robi to, ale nie robi to albo:

<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

istnieje żaden mt-20 w Bootstrap 4. bootstrap 4 margin classes są ...

m {boki} - {rozmiar}

przypadku wielkość wynosi 0-5 i rozmiar jest część jednostki domyślne odstępnik 1rem

• 0 - wyeliminowanie margines
• 1 - zestaw marginesu do .25rem
• 2 - zestaw z margines .5rem
• 3 - zestaw marginesu do 1rem
• 4 - ustawić margines 1.5rem
• 5 - ustawić margines 3rem

Więc można użyć mt-3, mt-4, mt-5 etc ..

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

Answer 2

Można umieścić znak końca wiersza pod kartami: <br />. A może dodać dolnego marginesu w ramach klasy card-deck:

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