将提交和取消按钮与引导程序对齐答案

【问题标题】：align submit and cancel button with bootstrap将提交和取消按钮与引导程序对齐
【发布时间】：2021-07-26 20:52:27
【问题描述】：

我在我的 Rails 应用程序中使用 bootstrap 2.0（使用 bootstrap-sass gem），但无法让提交按钮与取消按钮对齐。

下面是 html.erb 文件中表单的代码 sn-p：

<div class="span3">
  <%= f.submit class: "btn btn-primary" %>
  <button type="button" class="btn">Cancel</button>
</div>

这是它生成的 HTML：

<input class="btn btn-primary" type="submit" value="Add Person" name="commit">
<button class="btn" type="button">Cancel</button>

这就是它在 Firefox 14.0.1 中的样子。当我看到

注意：将 input-append 添加到 div 让我很接近（见下图）但仍然有点偏离 - 请注意取消仍然有点低，并且添加人员按钮右侧的圆角被切断。

如何让这两个按钮正确对齐？

更新我正在使用 Firefox 14.0.1。当我查看 @Vestride 创建的 jsfiddle 来复制这个问题时，我看到的是：

我对第一个结果很满意，但是当我将完全相同的代码添加到我的网站时，我没有得到相同的结果。相反，我得到了上面混乱的对齐方式。我想知道这意味着什么？也许我的引导 CSS 搞砸了？

7/27 更新 作为对 Vestride 最新建议的回应，这里是我的 Firefox 中显示的来自小提琴 Vestride 的按钮。请注意，从输入更改为提交没有任何改进。

【问题讨论】：

【解决方案1】：

我做了一个 jsfiddle http://jsfiddle.net/Vestride/YT3sq 但无法复制您的问题。它们非常适合我（Chrome 21）。你使用的是什么浏览器？在第二个示例中，我向容器元素添加了一个 btn-group 类。这也可能解决您的问题。

编辑：尝试将您的 <input /> 设置为 <button type="submit">。为我在 Firefox 中工作。我也更新了小提琴。

【讨论】：

【解决方案2】：

我知道这是一个老问题，但使用 Bootstrap 4 我遇到了同样的问题。为我解决的问题是在提交按钮上使用引导类添加margin-bottom: 0 或mb-0 类。

【讨论】：