web-dev-qa-db-fra.com

Bootstrap 4, ajoutez un espace entre deux jeux de cartes

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 jeu de cartes ne le fera pas. J'ai essayé de les emballer en rangées et de les faire, mais je ne les fais pas non plus:

enter image description here

<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>
csstwitter-bootstrapbootstrap-4twitter-bootstrap-4
19
InitLipton

Il n'y a pas mt-20 in Bootstrap 4. Les Bootstrap 4 classes de marge) sont ...

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

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

  • 0 - éliminer la marge
  • 1 - définit la marge sur .25rem
  • 2 - définit la marge sur .5rem
  • 3 - définit la marge sur 1rem
  • 4 - définit la marge sur 1.5rem
  • 5 - définit la marge sur 3rem

Vous pouvez donc utiliser mt-3, mt-4, mt-5 etc..

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

33
Zim

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

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