Estoy tratando de agregar espacio entre los dos mazos de cartas. Estoy usando bootstrap 4 alpha 6. Yo no tengo ni idea de por qué el uso de mt-20 en el segundo mazo de cartas de no hacerlo. He tratado de un ajuste en las filas y de hacerlo, pero no lo hace cualquiera:

Bootstrap 4, aumentar el espacio entre las dos cubiertas de tarjeta

<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>

OriginalEl autor InitLipton | 2017-04-03

2 Comentarios

  1. 23

    No hay mt-20 en Bootstrap 4. El Bootstrap 4 margen de clases

    m{lados}-{tamaño}

    Donde tamaño es de 0-5, y el tamaño de una porción de la predeterminada espaciador de la unidad de 1rem

    • 0 – eliminar el margen
    • 1 – establecer el
      margen de .25rem
    • 2 – establecer el margen para .5rem
    • 3 – establecer el margen para 1rem
    • 4 – establecer el margen para 1.5rem
    • 5 – establecer el margen para 3rem

    Así que usted puede utilizar mt-3, mt-4, mt-5 etc..

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

    OriginalEl autor Zim

  2. 1

    Usted podría poner un salto de línea debajo de las tarjetas: <br />. O tal vez agregar un margen inferior bajo la card-deck clase:

    .card-deck{
    bottom-margin: 10px;
    }
    Esto es cierto, pero yo votada abajo porque Bootstrap tiene esta clase ya. mb-[1-4] o, más en general mi-[1-4] tanto para la parte superior e inferior.
    mejor usar bootstrap espaciado que reinventar la rueda

    OriginalEl autor Tony

Dejar respuesta

Please enter your comment!
Please enter your name here