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

Question

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

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

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

Answer 1

要完成此操作，您必须使用正确的Twitter Bootstrap classes for forms。

在这种情况下，那是.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 =＆gt; top 这对我有用