Завантаження: вирівняти введення кнопкою

Чому кнопки та входи добре не вирівнюються у Bootstrap?

Я спробував щось просте, як:

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

Кнопка приблизно 5pxнижча за вхід у хром / фаєрфокс.

Twitter Bootstrap 4

У Twitter Bootstrap 4 введення та кнопки можна вирівняти за допомогою input-group-prependта input-group-appendкласів (див. Https://getbootstrap.com/docs/4.0/components/input-group/#button-addons )

Згрупувати кнопку ліворуч (додати)

<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 = Це дозволить вирівняти мітки та елементи вбудованого блоку для компактного макета

Приклад: http://jsfiddle.net/hSuy4/292/

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

.form-horizontal = Права вирівнювання міток і промальовування їх ліворуч, щоб вони відображалися в тому ж рядку, що й елементи управління, що краще для макета форми 2 стовпців.

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

В основному я перекреслив властивість відображення класу "form-control" і використав інші властивості стилю для корекції розміру та положення.

Ось результат:

Запуск 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>

Не пов’язані безпосередньо, якщо у вас немає подібного коду, але я щойно помітив дивну поведінку у формі-inline, bootstrap 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 вгору або вниз у рядку. Творить чудеса для мене.