如何在 Bootstrap 卡之間添加垂直間距

Question

我正在使用 boostrap 卡，以下是我目前的樣子：

現在我想做的是在卡片之間添加垂直空間，這樣卡片 1 和卡片 3 不會像卡片 2 和卡片 4 一樣粘在一起。

以下是我目前擁有的卡的代碼和設置：

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div class="row"> <div class="col-sm-6"> <div class="card"> <div class="card-body"> <h5 class="card-title">CARD 1</h5> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> </div> <div class="col-sm-6"> <div class="card"> <div class="card-body"> <h5 class="card-title">CARD 2</h5> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> </div> <div class="col-sm-6"> <div class="card"> <div class="card-body"> <h5 class="card-title">CARD 3</h5> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> </div> <div class="col-sm-6"> <div class="card"> <div class="card-body"> <h5 class="card-title">CARD 4</h5> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> </div> </div> </div>

Answer 1

為<div class="col-sm-6 mb-3">添加類mb-3

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div class="row"> <div class="col-sm-6 mb-3"> <div class="card"> <div class="card-body"> <h5 class="card-title">CARD 1</h5> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> </div> <div class="col-sm-6 mb-3"> <div class="card"> <div class="card-body"> <h5 class="card-title">CARD 2</h5> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> </div> <div class="col-sm-6 mb-3"> <div class="card"> <div class="card-body"> <h5 class="card-title">CARD 3</h5> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> </div> <div class="col-sm-6 mb-3"> <div class="card"> <div class="card-body"> <h5 class="card-title">CARD 4</h5> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> </div> </div> </div>

如果您想要更多空間，可以使用引導程序類，例如mb-4 mb-5

更多信息在這里

Answer 2

在css文件的card類中添加margin-bottom: 20px 。 檢查下面的簡單css。

在 style.css 文件中

.card { 
    margin-bottom: 20px !important;
 }

Answer 3

我會添加這樣的東西（SCSS）：

div[class^="col-"] {
   padding-top: 1rem;
   padding-bottom: 1rem;

   > h1,
   > h2,
   > h3,
   > h4,
   > h5,
   > h6 {
      margin-top: 0;
   }
}

* + * {
   :last-child {
       margin-bottom: 0;
   }
}

...一般處理垂直空間。