Bootstrap 3 - кнопка добавления в текстовое поле

Question

Использование кода Bootstrap 3 (последняя) ниже ...

<form> 
<div class="row"> 
<div class="col-sm-8"> 
    <label class="control-label">Text Field Label</label> 
    <div class="input-group"> 
    <input name="f1" value="" class="form-control" type="text" size="20" maxlength="100" placeholder="Text Field"> 
    <div class="input-group-btn"> 
    <button id="b1" type="submit" class="btn btn-success">Button Label</button> 
    </div> 
    </div> 
</div> 
<div class="col-sm-4"> 
<!-- Other elements to go here --> 
</div> 
</div> 
</form> 

Приведенный выше код делает следующим образом (снимок экрана) на всех браузерах я тестировал:

Но независимо от того, какую комбинацию я стараюсь, если кнопка содержит более 2 или 3 символов, кнопка обертывает текст и выглядит слишком большой (выше, чем поле ввода текста) - как это можно зафиксировать чтобы кнопка содержала больше текста БЕЗ появления больших r (по высоте), чем поле ввода текста?

Обратите внимание: я не хочу использовать «form-inline», поскольку мне нужно иметь другие элементы в строке - я включил только столбец, содержащий соответствующие элементы формы.

Answer 1

Проверьте DEMO, ваш код выглядит нормально.

Maybe you missed load Jquery 1.11.x ? 

Порядок загрузки:

• bootstrap.min.css
• jquery.min.js (1.11 или +)
• bootstrap.min.js

Как последний вариант, «Осмотреть» кнопку и проверить, применяются ли другие классы.