css - 将提交和取消按钮与 Bootstrap 对齐

Question

我在我的 Rails 应用程序中使用 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 中的样子。当我看着

注意:将 input-append 添加到 div 让我接近(见下图)但仍然有点偏离——请注意，取消仍然有点低，添加人按钮右侧的圆 Angular 被切断。

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

更新 我正在使用 Firefox 14.0.1。当我查看由@Vestride 创建的 jsfiddle 以复制此问题时，这是我所看到的:

我对第一个结果很满意，但是当我将完全相同的代码添加到我的站点时，却没有得到相同的结果。相反，我得到了上面困惑的对齐方式。我想知道这是什么意思？也许我的 Bootstrap CSS 搞砸了？

7 月 27 日更新 为了回应 Vestride 的最新建议，这里是在我的 Firefox 中显示的按钮，这些按钮来自 fiddle Vestride 组合在一起。请注意，从输入更改为提交没有任何改进。

Answer 1

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

编辑: 尝试制作你的 <input />一个<button type="submit"> .为我在 Firefox 中工作。我也更新了 fiddle 。