在 Bootstrap 中的列底部放置一个按钮

Question

我试图将按钮放置在列的底部，但没有成功。

我读了这个所以我添加了 d-flex, flex-column, mt-auto CSS 类但他们没有任何效果。我错过了什么？

.my-200 {
  height: 400px;
  background-color: black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="row justify-content-around">
  <div class="col-2 my-200">
  </div>
  <div class="col-10 flex-column">
    <div class="form-row">
      <div class="form-group col-12">
        <label>Title</label>
        <input name="comment" type="text" class="form-control" value="">
      </div>
    </div>

    <div class="form-row mt-3">
      <div class="form-group col-4">
        <button class="btn btn-primary">button 1</button>
      </div>
    </div>

    <div class="form-row mt-auto">
      <div class="form-group col-4">
        <button class="btn btn-dark">place bottom</button>
      </div>
    </div>
  </div>
  </div

Answer 1

在 flex-column 元素有效地使它成为一个弹性容器，然后在最后一个 form-row 包含使 align-self 设置为 start 的按钮的元素。

.my-200 {
  height: 400px;
  background-color: black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="row justify-content-around">
  <div class="col-2 my-200">
  </div>
  <div class="row col-10 flex-column">
    <div class="form-row">
      <div class="form-group col-12">
        <label>Title</label>
        <input name="comment" type="text" class="form-control" value="">
      </div>
    </div>

    <div class="form-row mt-3">
      <div class="form-group col-4">
        <button class="btn btn-primary">button 1</button>
      </div>
    </div>

    <div class="form-row mt-auto align-self-start">
      <div class="form-group col-4">
        <button class="btn btn-dark">place bottom</button>
      </div>
    </div>
  </div>
  </div

在 Bootstrap 中的列底部放置一个按钮

Place a button in the bottom of a column in Bootstrap

css

bootstrap-4