css - 将提交和取消按钮与引导程序对齐

Question

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

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

未对齐按钮的图片

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

在此处输入图像描述

我怎样才能让这两个按钮正确对齐？

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

在此处输入图像描述

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

更新 7/27 响应 Vestride 的最新建议，这里是按钮，它们显示在我的 Firefox 中，来自小提琴 Vestride 放在一起。请注意，从输入更改为提交没有任何改进。在此处输入图像描述

score 2 · Accepted Answer

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

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

score 0 · Accepted Answer

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

2 回答 2