有点奇怪的问题。我正在关注 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>
我很困惑为什么它会在一侧起作用而不是另一侧。任何帮助将不胜感激!
最佳答案
如果您编写了任何自定义 CSS,那么似乎有什么地方不对劲。我刚刚复制了您的 html 并使用 bootstrap cdn css 托管文件创建了一支笔。 Check this pen/demo.
这是因为您以某种方式在按钮元素的上方和下方添加了 break 标记,即
。只需删除这些中断即可。
关于html - Bootstrap 3 - 垂直对齐输入组按钮和表单时出现问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18602727/