如何将Bootstrap 4联系表单按钮对齐至右下角？

要把表单按钮从底部中间改成右下角对齐，用Bootstrap 4的内置工具类就能轻松实现，给你两种常用的方案：

方案1：文本对齐类快速实现（适合按钮只需靠右，无需强制贴底的场景） #

如果你的按钮已经在表单底部，只需要让它靠右，直接给按钮所在的容器添加text-right类就行。比如修改你的表单结构：

<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 text-right">
          <button type="submit" class="btn btn-primary">发送消息</button>
        </div>
      </form>
    </div>
  </div>
</div>

text-right是Bootstrap 4的文本对齐工具类，会让容器内的行内/行内块元素（比如按钮）自动右对齐。

方案2：Flex布局实现按钮贴底+靠右（适合需要按钮固定在表单底部的场景） #

如果你的表单有一定高度，希望按钮不管表单内容多少都贴在底部且靠右，可以用Bootstrap的flex工具类：

<div class="row">
  <div class="col center-block">
    <div class="contact">
      <h2>Contact</h2>
      <!-- 给表单添加d-flex flex-column h-100，让表单成为垂直方向的flex容器并占满高度 -->
      <form class="d-flex flex-column h-100" action="mailto:test@test.com" method="post" enctype="text/plain">
        <!-- 其他表单组 -->
        <div class="form-group">
          <label for="name">姓名</label>
          <input type="text" class="form-control" id="name">
        </div>
        <!-- 用mt-auto把按钮组推到容器底部，同时加text-right让按钮靠右 -->
        <div class="form-group mt-auto text-right">
          <button type="submit" class="btn btn-primary">发送消息</button>
        </div>
      </form>
    </div>
  </div>
</div>

这里的关键类作用：

• d-flex flex-column：把表单变成垂直方向的Flex容器
• h-100：让表单占满父容器的高度（如果父容器.contact没有设置高度，可能需要给它也加h-100或者指定固定高度，比如style="min-height: 400px;"）
• mt-auto：自动给按钮容器添加顶部margin，把它推到Flex容器的底部
• text-right：让按钮在容器内靠右对齐

内容的提问来源于stack exchange，提问作者nCardot