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

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



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


кнопка примерно на 5px ниже, чем вход в chrome/firefox.enter image description here

534   10  

10 ответов:

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

479  
2017-05-23 15:10:45

можно использовать input-group button property чтобы применить кнопку непосредственно к полю ввода.

Bootstrap 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 doc много примеров.

example for bs3 input group button

162  
2018-04-04 00:17:06

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

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

37  
2012-12-07 01:10:47

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

Пример: http://jsfiddle.net/hSuy4/292/

<div class="form-inline">
<input type="text">
<input type="button" class="btn" value="submit">
</div>

.форма-горизонтальная = выровняйте метки справа и переместите их влево, чтобы они отображались в той же строке, что и элементы управления, что лучше для макета формы 2 столбца. 

(e.g. 
Label 1: [textbox]
Label 2: [textbox]
     : [button]
)

примеры: http://twitter.github.io/bootstrap/base-css.html#forms

27  
2013-07-15 23:04:00

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

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

enter image description here

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

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

надеюсь, что это помогает.

12  
2016-01-29 07:03:37

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

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

следующий результат:

enter image description here

5  
2018-01-28 06:23:09 
<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>
3  
2016-02-10 13:58:48

я попробовал все вышеперечисленные коды и ни один из них исправил свои проблемы. Вот что сработало для меня. Я использовал 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>
1  
2016-06-09 16:15:34

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

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

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

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

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

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

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

1  
2017-02-01 15:24:09 
style="padding-top: 8px"

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

-1  
2014-09-18 22:35:30

Comments

    Ничего не найдено.
Click here to cancel reply.