Twitter bootstrap Bootstrap 4具有响应表的相等列宽

所以我遇到了这个问题，我发现了这个堆栈：

这意味着您可以将

d-flex

添加到

tr

中，然后只需使用

col-3

或任何大小的列即可。这听起来不错，但实际上，它并不像我希望的那样有效

我有一张简单的桌子：

<div class="table-responsive">
  <table class="table table-borderliness table-product">
    <tbody>
      <tr class="d-flex">
        <td class="col-3" scope="row">Weight</td>
        <td class="col-3 table-active">Light</td>
        <td class="col-3">Midweight</td>
        <td class="col-3">Heavy</td>
        <td class="col-3"></td>
      </tr>
      <tr class="d-flex">
        <td class="col-3" scope="row">Size</td>
        <td class="col-3 table-active">Small</td>
        <td class="col-3">Large</td>
        <td class="col-3"></td>
        <td class="col-3"></td>
      </tr>
    </tbody>
  </table>
</div>

重量
光
中等体重
重的
大小
小的
大的

当我看到它时，它比它应该的要大得多。这里有一个代码笔可以查看：

它所做的是使每一列都变得庞大。我希望它们整齐地排成一行（容器宽度的100%），并且仅当内容+填充大于视口宽度时才显示滚动条

---

这应该很容易：）

事实上，我解决了这个问题。我所要做的就是：

.table-product [class^="col-"] {
    flex-shrink: 1;
}