Bootstrap: выровнять ввод с помощью кнопки

Почему кнопки и входы не совпадают в Bootstrap?

Я попробовал что-то простое, как:

<input type="text"/><button class="btn">button</button>

Кнопка примерно 5pxниже, чем ввод в Chrome / Firefox.

Twitter Bootstrap 4

В Twitter Bootstrap 4, входы и кнопки могут быть приведены в соответствие с использованием input-group-prependи input-group-appendклассов (см https://getbootstrap.com/docs/4.0/components/input-group/#button-addons )

Групповая кнопка на левой стороне (prepend)

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <button class="btn btn-outline-secondary" type="button">Button</button>
  </div>
  <input type="text" class="form-control">
</div>

Групповая кнопка на правой стороне (добавить)

<div class="input-group mb-3">
  <div class="input-group-append">
    <button class="btn btn-outline-secondary" type="button">Button</button>
  </div>
  <input type="text" class="form-control">
</div>

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или %измерения.

Вы можете использовать свойство кнопки группы ввода, чтобы применить кнопку непосредственно к полю ввода.

Бутстрап 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 для многих других примеров.

Только головы, кажется, есть специальный класс CSS для этого form-horizontal

У input-append есть еще один побочный эффект: он уменьшает размер шрифта до нуля.

Используйте .form-inline = Это выровняет метки по левому краю и элементы управления inline-block для компактного макета.

Пример: 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

Я попробовал прежде всего и в итоге получил несколько изменений, которыми хотел бы поделиться. Вот код, который работает для меня (найдите прикрепленный скриншот):

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

Надеюсь это поможет.

Я также боролся с той же проблемой. Классы начальной загрузки, которые я использую, не работают для меня. Я нашел обходной путь, как показано ниже:

<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" и использовал другие свойства стиля для корректировки размера и положения.

Ниже приводится результат:

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>

https://getbootstrap.com/docs/4.0/components/input-group/

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

Я перепробовал все приведенные выше коды, и ни один из них не устранил мои проблемы. Вот что сработало для меня. Я использовал input-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>

Не имеет прямого отношения, если у вас нет похожего кода, но я только заметил странное поведение для встроенной формы, начальная загрузка 3.3.7

Я не использовал строки и ячейки для этого, так как это настольный проект, если открывающий тег был ниже таблицы (в данном случае):

<table class="form-inline"> 
<form> 
<tr>

Элементы формы будут складываться.

Переключатель и он правильно выстроился.

<form>
<table class="form-inline">
<tr>

Safari 10.0.2 и последняя версия Chrome не сделали никаких различий. Может быть, мой макет был неправильным, но это не очень простительно.

Возьмите входной поплавок как слева. Затем возьмите кнопку и плавайте прямо. Вы можете очистить класс, когда вы берете более одного на расстояние.

<input style="width:65%;float:left"class="btn btn-primary" type="text" name="name"> 
<div style="width:8%;float:left">&nbsp;</div>
<button class="btn btn-default" type="button">Go!</button>
<div class="clearfix" style="margin-bottom:10px"> </div>

style="padding-top: 8px"

Используйте это, чтобы сместить ваш div вверх или вниз в вашем ряду. Творит чудеса для меня.