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

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 Kommentare

  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

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea