带Bootstrap的一行中的五个响应列

Question

我想创建一个有5个响应列的行，这些列从上到下和从侧面具有相等的填充，但无法找到如何使用bootstrap实现的最佳解决方案。

当前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-*元素上使用边距-x。

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

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

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

​