如何在bootstrap 4模式中的DIV之间留出空格？

Question

如何在bootstrap 4模式中的DIV之间留出空格？

​

​

HTML

<div class="form-group clearfix row">
    <div class="col-lg-3 pd-30 card bg-info border-radius-5 box-shadow text-center justify-content-center align-self-center">
        <h1 class="text-white">1</h1>
    </div>
    <div class="col-lg-3 pd-30 card bg-info border-radius-5 box-shadow text-center justify-content-center align-self-center">
        <h1 class="text-white">2</h1>
    </div>
    <div class="col-lg-3 pd-30 card bg-info border-radius-5 box-shadow text-center justify-content-center align-self-center">
        <h1 class="text-white">3</h1>
    </div>
    <div class="col-lg-3 pd-30 card bg-info border-radius-5 box-shadow text-center justify-content-center align-self-center">
        <h1 class="text-white">4</h1>
    </div>
</div>

Answer 1

只需创建一个div并将所有classes name放入该div中。不要把所有的东西都用在col-上。

<div class="col-lg-3">
  <div class=" more classes here">
     .....
  </div>
</div>

​

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="form-group clearfix row">
    <div class="col-lg-3 col-sm-3 pd-30">
      <div class=" card bg-info border-radius-5 box-shadow text-center justify-content-center align-self-center">
        <h1 class="text-white">1</h1>
      </div>
        
    </div>
        <div class="col-lg-3 col-sm-3 pd-30">
      <div class=" card bg-info border-radius-5 box-shadow text-center justify-content-center align-self-center">
        <h1 class="text-white">1</h1>
      </div>
        
    </div>
      <div class="col-lg-3 col-sm-3 pd-30">
      <div class=" card bg-info border-radius-5 box-shadow text-center justify-content-center align-self-center">
        <h1 class="text-white">1</h1>
      </div>
        
    </div>
      <div class="col-lg-3 col-sm-3 pd-30">
      <div class=" card bg-info border-radius-5 box-shadow text-center justify-content-center align-self-center">
        <h1 class="text-white">1</h1>
      </div>
        
    </div>
</div>

​