如何在引导程序 4 模态中的 DIV 之间留出空格？答案

【问题标题】：How to make a space between DIV in bootstrap 4 modal?如何在引导程序 4 模态中的 DIV 之间留出空格？
【发布时间】：2020-04-11 15:08:39
【问题描述】：

如何在 bootstrap 4 modal 中的 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>

【问题讨论】：

向 1,2,3 添加一些填充权是否有效？编辑：添加此示例：style="padding-right: 10px"
可以加mr-1（最多5个）Bootstrap Spacing

标签： html bootstrap-4 bootstrap-modal

【解决方案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>

【讨论】：