Выравнивание текстового поля и кнопки, бутстрап

У меня возникла следующая проблема с текстовым полем с бутстрапом и кнопкой ввода много раз. Обратите внимание, что они не выровнены по вертикали:

enter image description here

Как выровнять эти два элемента? Вот HTML:

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

Ответы

Ответ 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/

Ответ 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>

Ответ 3

<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>

изменить css для класса input-group-btn в boostrap-min: vertical-align = > top это работает для меня