Блог

Я новичок в bootstrap и пытаюсь реализовать его в своем веб-приложении. Я хочу сгруппировать три разные части, чтобы они выглядели красиво, но результат приведенного ниже кода переводит значение <button> float в правую часть браузера.

Я думаю, это означает, что группировка работает, поскольку она находится в одной строке. Но почему <button> -то все еще не обрезается до <input/> . Я использовал эту страницу компонентов начальной загрузки в качестве ссылки / примера для создания моего кода.

Мой вопрос: как мне сделать <button> «клип / привязку» к <input/> ?

 <div class="input-group">
<div class="input-group-addon">
    Add project:
</div>
<input type="text" class="form-control input-group" placeholder="Type new project here"/>
<div class="input-group-btn">
    <button type="button" class="btn btn-default ">Add</button>
</div>
  

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

Используйте класс pull-left , это приведет его к <input/> . Смотрите Обновленный код ниже:

 <div class="input-group">
<div class="input-group-addon">
    Add project:
</div>
<input type="text" class="form-control input-group" placeholder="Type new project here"/>
<div class="input-group-btn pull-left"> <!-- add pull-left here -->
    <button type="button" class="btn btn-default ">Add</button>
</div>