Группы ввода больше, чем вход в Bootstrap 3 с использованием контейнера Jumbotron

Я экспериментирую с странным поведением с группами ввода Bootstrap 3. Когда я добавляю входную группу-аддон (текст или значок) в форму внутри jumbotron, высота входной группы больше, чем ее высота ввода.

Здесь вы можете найти JsFiddle и скриншот с проблемой:

<div class="jumbotron">
    <h1>Jumbotron with form</h1>
        <form>
           <div class="input-group">
               <input type="text" class="form-control" placeholder="Username">
                  <span class="input-group-addon">@</span>
           </div> 
        </form>
  </div>

Пример в режиме http://jsfiddle.net/DTcHh/

Снимок экрана:

Как я могу исправить эту проблему? Я ищу решение Bootstrap, но если это невозможно, было бы неплохо, если бы вы могли помочь мне исправить его с помощью правил CSS.

Ответ 1

Решение bootstrap заключается в том, чтобы добавить класс input-group-lg в содержащий <div> - как указанный в документации, но вы обратите внимание, что аддон по-прежнему немного больше, чем вход, поэтому вы можете просто настроить высоту <input> для соответствия; Я добавил 5 px:

http://jsfiddle.net/DTcHh/21/

Ответ 2

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

.input-group .form-control {
    margin: 0px !important;
}

Возможно, это помогает кому-то с подобной проблемой!

Ответ 3

Основная проблема размера .input-group-addon внутри .jumbotron заключается в том, что он наследует font-size of .jumbotron.

Обычно люди пытаются изменить высоту, минимальную высоту или дополнение и т.д.

Однако причина разного размера заключается в том, что .input-group в .jumbotron наследует "font-size: 21px;"

Вы должны изменить font-size .input-group НЕ .input-group-addon, как показано ниже.

.input-group { font-size: 14px !important; }

Ответ 4

Глядя на Bootstrap doc, как предлагает Adrift, ваш оригинальный код выглядит совершенно корректно. Добавление класса input-group-lg замечательно, если вы хотите LARGE, но если вы этого не сделаете, это неправильно. Используя IE9 и запуская свой код как в моей собственной среде dev, так и в Adrift jsfiddle, он работает правильно (для меня) с классом input-group-lg и без него, за исключением того, что с его помощью он стал большим. Возможно, проблема с браузером?

Тем не менее, я испытываю аналогичную проблему, пытаясь добавить переключатель на передней панели selectpicker. О, хорошо...

Ответ 5

Я исправил добавление id="search_button" к моей кнопке:

<div class="input-group input-group-lg">
    <input type="text" class="form-control" placeholder="Username"/>
    <span class="input-group-btn">
        <button id="search_button" class="btn btn-primary" type="button">GO</button>
    </span>
</div>

Затем я применил следующий стиль к моей кнопке:

#search_button {
    width: 90px;
    margin: 0 auto;
    text-align: justify;
}

Что все.

Ответ 6

Вместо того, чтобы сделать вход больше, сделать span (input-group-addon) меньше. Чтобы сделать это, сделайте его заполнение ниже. Итак:

.input-group-addon {
    padding: 0px 6px;
}