如何在 Bootstrap 卡片元素之间添加空格？

Posted 2023-03-06

【中文标题】如何在 Bootstrap 卡片元素之间添加空格？

【英文标题】：How can I add space between Bootstrap card elements?

【发布时间】：2017-08-28 14:52:09

【问题描述】：

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

【参考方案1】：

Bootstrap 4 中没有 mt-20。Bootstrap 4 margin classes 是...

msides-size

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

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

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

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

【参考方案2】：

您可以在card 类下放置一个底部边距：

.card
    margin-bottom: 10px;

【讨论】：

这是真的，但我投了反对票，因为 Bootstrap 已经有了这个类。 mb-[1-4] 或更一般地 my-[1-4] 用于顶部和底部。

最好使用bootstrap spacing而不是重新发明***

【参考方案3】：

这里的另一个答案很好地解释了 mt- 的使用。

我只想补充一点，您可以使用引导网格来更好地使用容器、行和列来构造代码。

请看下面的例子：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
  
  <div class="container text-center">
    <div class="row">
      <div class="col">
        card element 1
      </div>
      <div class="col">
        card element 2
      </div>
      <div class="col">
        card element 3
      </div>
    </div>
    <div class="row mt-2">
      <div class="col">
        card element 4
      </div>
      <div class="col">
        card element 5
      </div>
      <div class="col">
        card element 6
      </div>
    </div>
  </div>

这里为第二行上边距添加 mt-2

【参考方案4】：

我发现当使用行或列（网格格式）来布局卡片时，您需要在列上设置垂直间距的边距：

            <div class="col  mb-2">
               <div class="card h-100">
                  ...
               </div>
            </div>