html - Bootstrap 4 网格 - 行的长度不同

我正在实现 Bootstrap 4 网格。我注意到，如果我在容器上设置 max-width，行的长度就会变得不均匀。

这是一个例子:

.container {
  max-width: 500px !important;
}

.purple-row [class^="col"] {
  background-color: rgba(232, 179, 254, 0.5);
  border: 1px solid rgba(232, 179, 254, 0.75);
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
<div class="container">
  <div class="row purple-row">
    <div class="col-8">col-8</div>
    <div class="col-4">col-4</div>
  </div>
  <div class="row purple-row">
    <div class="col">col-4</div>
    <div class="col">col-4</div>
    <div class="col">col-4</div>
  </div>
</div>

这是为什么呢？ flex-basis 百分比列不准确吗？也许我缺少一些简单的东西，但我很感谢这里的帮助。

这是一个CodePen Demo对此进行实验。

Bootstrap 4 允许您通过其 $container-max-widths 变量设置容器 max-width。但是，当我这样做时，我遇到了我所描述的问题。

最佳答案

第二行具有名为col的类，而第一行具有名为col-8的类，并且col-4。通过简单地将其他 col 也设置为 col-4，就可以解决问题: JSFiddle .