html - Bootstrap 4 Grid - 行的长度不同

Question

我正在实现 Bootstrap 4 Grid。我注意到，如果我在容器上设置 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。但是，当我这样做时，我遇到了我描述的问题。

Answer 1

第二行有名为col的类，而第一行有名为col-8的类，并且第 4 列。通过简单地使其他 col 也成为 col-4，它解决了问题:JSFiddle .