Почему кнопки и входы не выравниваются в бутстрапе? Я пробовал что-то простое:
<input type="text"/><button class="btn">button</button>
Кнопка примерно на 5px ниже, чем вход в chrome/firefox. 
Bootstrap: выравнивание ввода с помощью кнопки
Ответ 1
Twitter Bootstrap 3
Как показано в ответе @abimelex, входы и кнопки можно выровнять с помощью классов .input-group (см. http://getbootstrap.com/components/#input-groups-buttons)
Кнопка группы на левой стороне
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
<input type="text" class="form-control">
</div>
Кнопка группы с правой стороны
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
Это решение было добавлено, чтобы поддерживать мой ответ в актуальном состоянии, но, пожалуйста, придерживайтесь своего голоса на ответе, предоставленном @abimelex.
Twitter Bootstrap 2
Bootstrap предлагает класс .input-append, который работает как элемент оболочки и исправляет это для вас:
<div class="input-append">
<input name="search" id="search"/>
<button class="btn">button</button>
</div>
Как отметил @OleksiyKhilkevich в своем ответе, есть второй способ выровнять input и button с помощью класса .form-horizontal:
<div class="form-horizontal">
<input name="search" id="search"/>
<button class="btn">button</button>
</div>
Различия
Разница между этими двумя классами заключается в том, что .input-append поместит button в сторону элемента input (поэтому они выглядят так, как будто они прикреплены), где .form-horizontal будет помещать пробел между ними.
- Примечание -
Чтобы элементы input и button находились рядом друг с другом без интервала, font-size был установлен в 0 в классе .input-append (это удаляет белый интервал между inline-block элементов). Это может отрицательно сказаться на размерах шрифтов в элементе input, если вы хотите переопределить значения по умолчанию с помощью измерений em или %.
Ответ 2
Вы можете использовать свойство кнопки группы ввода, чтобы применить кнопку непосредственно к полю ввода.
Бутстрап 3 и 4
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div><!-- /input-group -->
Взгляните на документ BS4 Input-Group для многих других примеров.
Ответ 3
Просто голова вверх, похоже, для этого называется специальный класс CSS form-horizontal
input-append имеет другой побочный эффект, что он уменьшает размер шрифта до нуля
Ответ 4
Используйте .form-inline= Это позволит выровнять по левому краю метки и элементы управления встроенным блоком для компактного макета
Пример: http://jsfiddle.net/hSuy4/292/
<div class="form-inline">
<input type="text">
<input type="button" class="btn" value="submit">
</div>
.form-horizontal= Выровнять по правому краю метки и поместить их влево, чтобы они отображались в той же строке, что и элементы управления, которые лучше подходят для компоновки двух столбцов.
(e.g.
Label 1: [textbox]
Label 2: [textbox]
: [button]
)
Примеры: http://twitter.github.io/bootstrap/base-css.html#forms
Ответ 5
Я пробовал прежде всего и в итоге получил несколько изменений, которые хотел бы поделиться. Здесь код, который работает для меня (найдите прилагаемый скриншот):
<div class="input-group">
<input type="text" class="form-control" placeholder="Search text">
<span class="input-group-btn" style="width:0;">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
Если вы хотите, чтобы он работал, просто используйте нижеприведенный код в своем редакторе:
<html>
<head>
<link type='text/css' rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css' />
</head>
<body>
<div class="container body-content">
<div class="form-horizontal">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search text">
<span class="input-group-btn" style="width:0;">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
</div>
</div>
</body>
</html>
Надеюсь, что это поможет.
Ответ 6
Я также боролся с той же проблемой. Классы начальной загрузки, которые я использую, не работают для меня. Я нашел обходной путь, как показано ниже:
<form action='...' method='POST' class='form-group'>
<div class="form-horizontal">
<input type="text" name="..."
class="form-control"
placeholder="Search People..."
style="width:280px;max-width:280px;display:inline-block"/>
<button type="submit"
class="btn btn-primary"
style="margin-left:-8px;margin-top:-2px;min-height:36px;">
<i class="glyphicon glyphicon-search"></i>
</button>
</div>
</form>
По сути, я переопределил свойство display класса "form-control" и использовал другие свойства стиля для корректировки размера и положения.
Ниже приводится результат:
Ответ 7
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail3">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
</div>
<button type="submit" class="btn btn-default">Sign in</button>
</form>
Ответ 8
Bootstrap 4:
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-append">
<button class="btn btn-success" type="button">Button</button>
</div>
</div>
Ответ 9
Я пробовал все вышеперечисленные коды, и никто из них не исправил мои проблемы. Вот что сработало для меня. Я использовал add-group-addon.
<div class = "input-group">
<span class = "input-group-addon">Go</span>
<input type = "text" class = "form-control" placeholder="you are the man!">
</div>
Ответ 10
Не имеет прямого отношения, если у вас нет подобного кода, но я просто заметил странное поведение для form-inline, bootstrap 3.3.7
Я не использовал строки и ячейки для этого, поскольку это рабочий проект, если открывающий тег был ниже таблицы (в данном случае):
<table class="form-inline">
<form>
<tr>
Элементы формы будут складываться.
Переключатель и он правильно выровнен.
<form>
<table class="form-inline">
<tr>
Safari 10.0.2 и последний Chrome не отличались. Возможно, мой макет был неправильным, но он не очень прощает.
Ответ 11
Возьмите входной поплавок как слева. Затем возьмите кнопку и плавайте прямо. Вы можете очистить класс, когда вы берете более одного на расстояние.
<input style="width:65%;float:left"class="btn btn-primary" type="text" name="name">
<div style="width:8%;float:left"> </div>
<button class="btn btn-default" type="button">Go!</button>
<div class="clearfix" style="margin-bottom:10px"> </div>
Ответ 12
style="padding-top: 8px"
Используйте это, чтобы переместить div вверх или вниз в строке. Делает чудеса для меня.