CSS Bootstrap 4，在两副牌之间增加空间

Bootstrap 4, add space between two card decks

提问by InitLipton

I'm trying to add space between the two card decks. I'm using bootstrap 4 alpha 6. I've no idea why using mt-20on the second card deck wont do it. I've tried wrapping them in rows and doing it, but doesn't do it either:

我正在尝试在两个卡片组之间增加空间。我正在使用 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>

回答by Zim

There is no mt-20in Bootstrap 4. The Bootstrap 4 margin classesare...

mt-20Bootstrap 4 中没有。 Bootstrap 4边距类是...

m{sides}-{size}

m{边}-{大小}

Where sizeis from 0-5, and size is a portion of the default spacer unit of 1rem

其中size是从0-5，而 size 是默认间隔单元的一部分1rem

• 0 - eliminate the margin
• 1 - set the margin to .25rem
• 2 - set the margin to .5rem
• 3 - set the margin to 1rem
• 4 - set the margin to 1.5rem
• 5 - set the margin to 3rem

• 0 - 消除边距
• 1 - 将边距设置为 .25rem
• 2 - 将边距设置为 .5rem
• 3 - 将边距设置为 1rem
• 4 - 将边距设置为 1.5rem
• 5 - 将边距设置为 3rem

So you can use mt-3, mt-4, mt-5etc..

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

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

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

回答by Tony

You could put a line break under the cards: <br />. Or maybe add a bottom margin under the card-deckclass:

您可以在卡片下放置一个换行符：<br />。或者在card-deck类下添加一个底部边距：

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