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>

有没有办法使用 Bootstrap 创建响应式五列网格？

我想要达到的结果是：

任何帮助将不胜感激。

Answer 1

不要在 .col-* 元素上使用 margin-x。

1. 在.col-*上设置您的自定义填充-x

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

3. 将.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>