嵌套列bootstrap 4对齐底部

Question

我正在尝试使用Bootstrap 4生成表单，但在将一列与底部对齐时遇到问题：

我的问题

这是我的代码：

<div class="col-md-3 m-2">
  <div class="row">
    <div class="col-12 d-flex flex-column border border-primary bg-light rounded form-group h-100">
      <h3>text</h3>
      <div class="form-group">
        <label for="i1">i1</label>
        <input type="text" class="form-control" name="i1" id="i1" placeholder="i1" value="223108853">
      </div>
      <div class="form-group">
        <label for="i1">i1</label>
        <input type="text" class="form-control" name="i1" id="i1" placeholder="i1" value="223108853">
      </div>

    </div>

    <div class="col-12 border border-primary bg-light rounded form-group h-100 col align-self-end">
      <h3>bottom box</h3>
      <div class="form-group">
        <label for="i1">i1</label>
        <input type="text" class="form-control" name="i1" id="i1" placeholder="i1" value="223108853">
      </div>
      <div class="form-group">
        <label for="i1">i1</label>
        <input type="text" class="form-control" name="i1" id="i1" placeholder="i1" value="223108853">
      </div>
      <div class="form-group">
        <label for="i1">i1</label>
        <input type="text" class="form-control" name="i1" id="i1" placeholder="i1" value="223108853">
      </div>
      <div class="form-group">
        <label for="i1">i1</label>
        <input type="text" class="form-control" name="i1" id="i1" placeholder="i1" value="223108853">
      </div>
    </div>

  </div>
</div>

https://jsfiddle.net/rotor82/c7ugmsw8/3/

我不确定如何修复它，我尝试过align-self-end，但是它没有用。

Answer 1

如果将以下元素设置为margin-bottom: 0（当前设置为15px），则会解决问题。

.col-md-3.m-2:nth-of-type(2) .col-12:last-of-type {
  margin-bottom: 0;
}

jsFiddle