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允许您通过其max-width变量设置容器$container-max-widths。但是，当我这样做时，我得到了我描述的问题。

Answer 1

第二行包含名为col-8的类，而第一行包含名为col-4和foreach($html->find('a') as $links) { $html = file_get_html($links->href); echo $html; } 的类。通过简单地使另一个col也是col-4，它解决了问题：JSFiddle。

Answer 2

这似乎是使用元素的最大宽度百分比的结果。我能够通过添加以下CSS来解决问题：

.purple-row [class^="col"] {
  flex-grow: 1;
  max-width: 100%;
}