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标签，即你的按钮元素的上方和下方。只是删除那些休息。