Html 对齐文本框和按钮，引导
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16050133/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Aligning text box and button, bootstrap
提问by jn29098
I've had the following issue occur with a bootstrap-styled text field and input button many times. Notice that they are not vertically aligned:
我在引导程序样式的文本字段和输入按钮中多次出现以下问题。请注意，它们不是垂直对齐的：
How do I align these two elements? Here is the HTML:
我如何对齐这两个元素？这是 HTML：
<div class="span6">
<input type="text" placeholder="email"> <button type="button" class="btn btn-info">Sign up</button>
</div>
回答by Miljan Puzovi?
In order to complete that, you must use proper Twitter Bootstrap classes for forms.
为了完成它，您必须为 forms使用适当的Twitter Bootstrap 类。
In this case, that is .form-inlineclass.
在这种情况下，那就是.form-inline类。
Here is proper markup:
这是正确的标记：
<form class="form-inline">
<input type="text" class="input-small" placeholder="Email"/>
<button type="submit" class="btn">Sign in</button>
</form>
Here is demo http://jsfiddle.net/YpXvT/42/
回答by mabdrabo
<div class="navbar-form pull-left">
<input type="text" class="span2">
<button class="btn">Sign up</button>
</div>
copied from http://twitter.github.io/bootstrap/components.html#navbar
复制自http://twitter.github.io/bootstrap/components.html#navbar
or
或者
<div class="input-append">
<input type="text"/>
<button class="btn">Sign up</button>
</div>
or
或者
<div class="form-horizontal">
<input type="text"/>
<button class="btn">Sign up</button>
</div>
回答by Eric Hautecouverture
<div class="input-group">
<input type="email" class="form-control" required="required" placeholder="[email protected]">
<span class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="fa fa-send"></i></button>
</span>
</div>
change css for class input-group-btn in boostrap-min: vertical-align =>top it s work for me
在 boostrap-min 中更改 class input-group-btn 的 css：vertical-align =>top 它对我有用
