使用bootstrap对齐提交和取消按钮

Question

我在我的rails app中使用bootstrap 2.0（使用bootstrap-sass gem）并且无法获得与取消按钮对齐的提交按钮。

以下是html.erb文件中表单的代码段：

<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中的样子。当我看着

注意：添加输入附加到div让我接近（见下图）但仍然有点 - 注意取消仍然有点低，并且添加人员按钮右侧的圆角被切断了。

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

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

我对第一个结果感到满意，但是当我向我的网站添加完全相同的代码时，我得不到相同的结果。相反，我得到了上面的混乱对齐。我想知道这意味着什么？也许我的CSS for bootstrap搞砸了？

更新7/27 为了回应Vestride的最新建议，这里有一些按钮，因为它们在我的Firefox中从小提琴Vestride放在一起。请注意，从输入更改为提交没有任何改进。

Answer 1

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

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

Answer 2

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