html - 对齐文本框和按钮，引导程序

Question

引导样式的文本字段和输入按钮多次出现以下问题。请注意，它们不是垂直对齐的：

如何对齐这两个元素？这是HTML：

<div class="span6">
    <input type="text" placeholder="email"> <button type="button" class="btn btn-info">Sign up</button>
</div>

Answer 1

为了完成它，您必须为表单使用正确的 Twitter Bootstrap 类。

在这种情况下，这就是.form-inline类。

这是正确的标记：

<form class="form-inline">
  <input type="text" class="input-small" placeholder="Email"/>
  <button type="submit" class="btn">Sign in</button>
</form>

这是演示http://jsfiddle.net/YpXvT/42/

Answer 2

<div class="navbar-form pull-left">
  <input type="text" class="span2">
  <button class="btn">Sign up</button>
</div>

从http://twitter.github.io/bootstrap/components.html#navbar复制

或者

<div class="input-append">
    <input type="text"/>
    <button class="btn">Sign up</button>
</div>

或者

<div class="form-horizontal">
    <input type="text"/>
    <button class="btn">Sign up</button>
</div>

Answer 3

<div class="input-group">
        <input type="email" class="form-control" required="required" placeholder="monEmail@domaine.fr">
        <span class="input-group-btn">
            <button class="btn btn-default" type="submit"><i class="fa fa-send"></i></button>
        </span>
    </div>

在 boostrap-min 中更改类 input-group-btn 的 css：vertical-align =>top 它对我有用