如何将Bootstrap 4中的列与不确定的列数对齐

Question

对于我要构建的页面，我不需要固定的列数，我只想最合适。在bootstrap中，我只是通过将列添加到同一行来做到这一点。这几乎可以完美地工作，但是如果最后渲染的行与上面的行没有相同数量的元素，则它会将列分布在可用空间上。我想从左开始将底行与上面的列对齐。这可能吗？

这是我目前所拥有的，我希望底部的行元素从左侧与上方的元素对齐。我不希望有固定数量的列。

这是我的代码（角度6）：

<div class="container-fluid">
  <div class="row">
    <app-create-room class="col mb-4 d-flex align-items-stretch h-50"></app-create-room>
  </div>
  <div class="row">
    <app-room class="col mb-4 d-flex align-items-stretch" *ngFor="let room of rooms"
              [room]="room"></app-room>
  </div>
</div>