Вопрос по twitter-bootstrap, css – начальная загрузка: выровнять ввод с помощью кнопки

267

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

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

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

Ваш Ответ

10   ответов
28

использование.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

Фантастика! Именно то, что мне нужно для неприятной формы!
Кажется, что .form-inline работает только в области просмотра шириной не менее 768 пикселей:w3schools.com/bootstrap/bootstrap_forms.asp
.form-inline кажется более правильным здесь.
по какой-то причинеform-inline не работает, для меня
Я могу подтвердить, чтоform-inline работает для Bootstrap 3. Спасибо.
12

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

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

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

Bootstrap v3.0.0
Для какой версии Bootstrap это? И какую проблему это вызывает неиспользованиеstyle="width:0;" ?
способ начальной загрузки будет обернуть с помощью элемента col, как<div class="col-md-4"> Нет необходимости дляwidth: 0
Если вы не используете width: 0, это займет всю ширину страницы.
Это сделал трюк: P
508
Twitter Bootstrap 3

Как показано в ответе @abimelex, входы и кнопки можно выровнять, используя.input-group классы (см.http://getbootstrap.com/components/#input-groups-buttons):

Group button on the left side
<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>
Group button on the right side
<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>
The Differences

Разница между этими двумя классами заключается в том, что.input-append разместитbutton противinput элемент (чтобы они выглядели так, как будто они прикреплены), где.form-horizontal разместит пространство между ними.

-- Note --

To allow the input and button elements to be next to each other without spacing, the font-size has been set to 0 in the .input-append class (this removes the white spacing between the inline-block elements). This may have an adverse effect on font-sizes in the input element if you want to override the defaults using em or % measurements.

Кажется странным, что для этого вам понадобится класс-обертка. Разве они не выстраиваются по умолчанию?
Спасибо за ваш ответ, но я чувствую, что здесь что-то идет не так. Конечно, я не первый, кто желает, чтобы компоненты начальной загрузки были выровнены с элементами формы. pguardiario
@opsb, если бы они занимали столько же вертикального пространства, то да, они бы так и сделали. Однако поля ввода в загрузчике Twitter имеютmargin-bottom: 9px но кнопки не так, чтобы они не занимали одинаковое вертикальное пространство. Поскольку оба элемента имеютmiddle вертикальное выравнивание, кнопка смещена из-за разницы. С использованием.input-append Обертка удаляет это значение нижнего поля.
@pguardiario - вы совершенно правы. Это казалось неправильным, и после удара моего мозга я вспомнил.input-append учебный класс.
Это прекрасно работает, спасибо. pguardiario
172

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

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

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

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

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

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

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

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

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

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

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

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

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

1

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

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

enter image description here

-1
style="padding-top: 8px"

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

Похожие вопросы