具有Bootstrap[重复]的一行中的五个响应列

Question

我想创建一个有5个响应列的行，这些响应列从上到下和从侧面都有相同的填充，但是找不到最好的解决方案如何使用引导实现它。

当前html：

  <div class="row five-col-row">
    <div class="col col-md-2 mx-2">
      <h6>Sources</h6>
      <span>{{ allStats.sources }}</span>
    </div>
    <div class="col col-md-2 mx-2">
      <h6>Installs</h6>
      <span>{{ allStats.installs }}</span>
    </div>
    <div class="col col-md-2 mx-2">
      <h6>Conversions</h6>
      <span>{{ allStats.conversions }}</span>
    </div>
    <div class="col col-md-2 mx-2">
      <h6>Amount</h6>
      <span>{{ allStats.conversion_amount }}$</span>
    </div>
    <div class="col col-md-2 mx-2">
      <h6>Churn rate</h6>
      <span>{{ allStats.churn_rate }}%</span>
    </div>
  </div>

有没有一种方法可以通过引导创建一个响应性强的五列网格？

我想要达到的结果是：

任何帮助都将不胜感激。

Answer 1

>

在上设置自定义padding-x。col-*

在行上设置padding-y 它应该是的padding-x的两倍。col-*。例如，如果在列上设置10px padding-x，则行的padding-y应为20px，因为列之间有20px的空间。

将. col-*元素的内容包装在div中，并将所有样式应用于此元素而不是列。

div.col div {
  border: 1px solid #000; 
  height: 200px;  
}

.py-1rem {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row py-1rem">
    <div class="col col-md-2 px-2">
      <div></div>
    </div>
    <div class="col col-md-2 px-2">
      <div></div>
    </div>
    <div class="col col-md-2 px-2">
      <div></div>
    </div>
    <div class="col col-md-2 px-2">
      <div></div>
    </div>
    <div class="col col-md-2 px-2">
      <div></div>
    </div>
  </div>
</div>