引導程序4，在兩個卡片組之間增加空間

Question

我試圖在兩個卡片組之間增加空間。我使用bootstrap 4 alpha 6.我不知道爲什麼在第二張牌上使用mt-20不會這麼做。我試過行包裝他們，這樣做，但不這樣做，要麼：

<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

有一個在引導4.引導無是...

微{}雙方 - {大小}

凡大小是從0-5和大小是的1rem

• 0默認間隔物單元的一部分 - 消除餘量
• 1 - 餘量設置爲.5rem
• 3 - - 所述 餘量設置爲.25rem
• 2設置的餘量1rem
• 4 - 餘量設置爲1.5rem
• 5 - 餘量設置爲3rem

所以，你可以使用mt-3，mt-4，mt-5等。

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

Answer 2

你可以把線下破卡：<br />。或者，也許增加一個底部邊緣的card-deck類下設：

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