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

Question

有点奇怪的问题。我完全按照本节进行操作，但遇到了一些麻烦。当按钮与字段的左侧对齐时，它们会完美对齐，但是当按钮与右侧对齐时（我认为这对于“提交”类型的行为更自然），顶部大约有 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 托管文件创建了一支笔。检查此笔/演示。

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