导航栏中的 twitter bootstrap 按钮未正确垂直对齐答案

【问题标题】：twitter bootstrap's button in navbar not correctly vertically aligned导航栏中的 twitter bootstrap 按钮未正确垂直对齐
【发布时间】：2012-08-16 20:56:14
【问题描述】：

使用.pull-left 时，我无法在导航栏中定位<button class='btn' />元素。看到这个 jsFiddle：http://jsfiddle.net/6e49G/

按钮是垂直偏移的，看起来不太好：

【问题讨论】：

顺便说一句。我正在使用今天发布的 bootstrap 2.1.0

标签： css twitter-bootstrap vertical-alignment navbar

【解决方案1】：

以防万一有人像我一样偶然发现这个问题，这个问题似乎在 Bootstrap 的 2.3.0 版本中得到了修复。我之前运行的是 2.2.2 并且遇到了这个确切的问题（输入前置或输入附加），但只有按钮，而不是图标。作为最后的手段，我想我会检查 Bootstrap 的更新，谢天谢地，这成功了。

【讨论】：

是的，你是对的，它已在 2.3.0 中修复。我已经修改了上面的 jsFiddle，除了引导版本之外没有改变任何东西，现在看起来不错。见：jsfiddle.net/zLk2U

【解决方案2】：

您还可以将按钮从输入前置 div 中取出，然后将 form-inline 类应用于表单，它应该会为您提供所需的内容。见http://jsfiddle.net/6e49G/25/

【讨论】：

【解决方案3】：

看起来引导程序没有设计为在导航栏中附加按钮。我用自定义样式解决了它。您的上边距来自.navbar 样式。

.navbar-form .input-prepend .btn { margin-top: 0px; }

代码：http://jsfiddle.net/6e49G/15/

【讨论】：

抱歉，虽然我将您的答案标记为正确答案（确实如此，因为它修复了我的问题）：单击按钮将触发带有您的解决方案的表单提交，这不是我想要的我将 Noobie1 答案标记为正确的答案 - 没有出现问题。