начальная загрузка: выровнять ввод с помощью кнопки

217

Почему кнопки и входы не выравниваются в бутстрапе? Я пробовал что-то простое:

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

Кнопка примерно на 5px ниже, чем вход в chrome/firefox. Изображение 109

Теги:

10 ответов

423
Лучший ответ

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 или %.

Поделиться
  • 5
    Спасибо за ваш ответ, но я чувствую, что здесь что-то идет не так. Конечно, я не первый, кто желает, чтобы компоненты начальной загрузки были выровнены с элементами формы.
  • 0
    @pguardiario - вы совершенно правы. Это казалось неправильным, и после .input-append мозгу я вспомнил .input-append .
Показать ещё 6 комментариев
143

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

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

Изображение 2351

Поделиться
  • 2
    Другие не работали для меня, этот работал, однако, так, как я хотел. Спасибо.
  • 1
    Для меня это не сработало, если создать дополнительный тег span для выделения класса, но сработало, если я добавил этот класс в тег div: <div class="form-group input-group-btn">
36

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

input-append имеет другой побочный эффект, что он уменьшает размер шрифта до нуля

Поделиться
  • 1
    +1 хорошее место - мне пришлось разобраться, почему они использовали font-size: 0 и узнали что-то новое :) Спасибо!
22

Используйте .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

Поделиться
  • 0
    .form-inline кажется более правильным здесь.
  • 2
    Я могу подтвердить, что form-inline работает для Bootstrap 3. Спасибо.
Показать ещё 3 комментария
10

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

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

Изображение 2352

Если вы хотите, чтобы он работал, просто используйте нижеприведенный код в своем редакторе:

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

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

Поделиться
  • 0
    Это сделал трюк: P
  • 0
    Для какой версии Bootstrap это? И какую проблему это вызывает, не используя style="width:0;" ?
Показать ещё 4 комментария
1 
<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>
Поделиться
0

Не имеет прямого отношения, если у вас нет подобного кода, но я просто заметил странное поведение для form-inline, bootstrap 3.3.7

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

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

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

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

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

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

Поделиться
0

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

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

В принципе, я переопределял свойство отображения класса "form-control" и использовал другие свойства стиля для исправления размера и положения.

Ниже приведен результат:

Изображение 2353

Поделиться
0

Я пробовал все вышеперечисленные коды, и никто из них не исправил мои проблемы. Вот что сработало для меня. Я использовал 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>
Поделиться
-1 
style="padding-top: 8px"

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

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню