html - Bootstrap 3 - 垂直对齐输入组按钮和表单时出现问题

Question

有点奇怪的问题。我正在关注 this section完全正确，但有点麻烦。当按钮与字段的左侧对齐时，它们会完美对齐，但是当按钮与右侧对齐时(我认为这对于“提交”类型的行为更自然)，顶部大约有 5-10px 的填充我无法摆脱的按钮:

我的代码如下:

<div class="col-sm-7">
   <h3>Get the latest Amazon News first:</h3>
   <div class="input-group">
      <input type="text" class="form-control" placeholder="E-mail" />
      <span class="input-group-btn">
         <button class="btn btn-default btn-group" type="submit">Sign Up</button>
      </span>
   </div><!-- /input-group -->
</div><!-- /col-7 -->
<div class="col-sm-5">
   <h3>Get Started Now:</h3>
   <a class="btn btn-large btn-primary" href="#"><i class="icon-caret-right icon-space-right"></i>Start a Free Trial!</a>
</div>

我很困惑为什么它会在一侧起作用而不是另一侧。任何帮助将不胜感激!

Answer 1

如果您编写了任何自定义 CSS，那么似乎有什么地方不对劲。我刚刚复制了您的 html 并使用 bootstrap cdn css 托管文件创建了一支笔。 Check this pen/demo.

这是因为您以某种方式在按钮元素的上方和下方添加了 break 标记，即
。只需删除这些中断即可。