css - 将按钮对齐到窗体的右下角

Question

我使用 Bootstrap 4 制作了一个带有联系表单的简单页面，并希望按钮对齐到右下角，而不是底部中间。我怎样才能做到这一点？

这是表单的 HTML:

      <div class="row">
        <div class="col center-block">
          <div class="contact">
            <h2>Contact</h2>

              <form action="mailto:test@test.com" method="post" enctype="text/plain">
                <div class="form-group">
                  <input type="text" class="form-control" id="contact-name" placeholder="Name" required>
                </div>
                <div class="form-group">
                  <input type="email" class="form-control" id="contact-email" aria-describedby="emailinfo" placeholder="Email" required>
                </div>
                <div class="form-group">
                  <input type="text" class="form-control" id="contact-message" placeholder="Your message" required>
                </div>
                <button type="submit" class="btn btn-dark">Send</button>
              </form>

          </div>
        </div>
      </div>

以及应用于按钮和表单元素的 CSS:

.form-control {
  width: 50%;
  margin: 0 auto;
  border-bottom: 1px solid #888;
  border-top: 0px;
  border-left: 0px;
  border-right: 0px;
  border-radius: 0;
  padding: 10px 0px;
}

input[type=text], input[type=email] {
  background-color: WhiteSmoke;
}

button {
  margin-top: 1em;
  margin-bottom: 2em;
}

Answer 1

将此代码用于按钮:

<div class="bt-btn">
  <button type="submit" class="btn btn-dark">Send</button>
</div>

CSS:

.bt-btn {
    margin: 0 auto;
    text-align: right;
    width: 50%;
}