Twitter Bootstrap中导航栏中的按钮垂直对齐不正确。

Question

我在使用.pull-left时，无法正确定位导航栏中的元素。请参考这个jsFiddle链接：http://jsfiddle.net/6e49G/ 这些按钮的垂直偏移看起来不太好看：

- Dynalon

---

顺便说一下，我正在使用今天发布的Bootstrap 2.1.0。 - Dynalon

Answer 1

以防万一有人像我一样遇到这个问题，这个问题似乎已经在Bootstrap的2.3.0版本中得到解决。 之前我运行的是2.2.2版本，遇到了这个确切的问题（input-prepend或input-append），但只有在按钮上出现，而不是图标。最后我想到检查Bootstrap的更新，幸运的是它解决了这个问题。

- thavith

---

是的，你说得对，这个问题在2.3.0版本中已经修复了。我修改了上面的jsFiddle，只改变了bootstrap的版本，现在看起来很好。请参见：http://jsfiddle.net/zLk2U/ - Dynalon

Answer 2

你也可以将按钮从输入预置div中取出，然后将form-inline类应用于表单，这样就可以得到你想要的效果。请参见http://jsfiddle.net/6e49G/25/。

- meatherly

Answer 3

看起来Bootstrap并不适合在导航栏中添加附加按钮。我通过自定义样式来解决这个问题。你的顶部边距来自于.navbar样式。

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

Code: http://jsfiddle.net/6e49G/15/

- Samich

---

抱歉，虽然我将您的答案标记为正确答案（因为它修复了我的问题），但点击按钮会触发您的解决方案的表单提交，这不是我想要的，所以我选择将Noobie1的答案标记为正确答案——在那里问题不会出现。 - Dynalon