Как поместить несколько входов Bootstrap на одной линии?

Question

У меня есть следующий HTML:

<input type="text" class="form-control" name="watch" value="" placeholder="watch"> 

<div class="input-group"> 
    <span class="input-group-addon">$</span> 
    <input type="number" class="form-control" name="price" value="" placeholder="Price (optional)" style="width: 140px;"> 
</div> 

<span class="btn btn-primary" onclick="update($(this));"><span class="glyphicon glyphicon-upload" aria-hidden="true"></span> Update</span> 

JSFIDDLE

Это делает так:

Как я могу получить оба входа и кнопку на той же строке? Я возился с CSS, но не могу заставить его работать. Мне удалось заставить его работать со столом, но я знаю, что решение CSS будет «лучше».

Answer 1

Вы можете использовать встроенные формы, как в документации Bootstrap найти здесь: http://getbootstrap.com/css/

Класс «форма-рядный», вероятно, что вы ищете.

Answer 2

Использование макета сетки с xs размер телефона, чтобы заставить сетку отзывчивым, сетка разделена на 12 ячеек, так что вы будете нуждаться в 3 х 4.

<div class="row"> 
    <div class="col-xs-4"> 
    </div> 
    <div class="col-xs-4"> 
    </div> 
    <div class="col-xs-4"> 
    </div> 
</div> 

Вы также можете иметь один из них больше, чем другие:

<div class="row"> 
    <div class="col-xs-7"> 
    </div> 
    <div class="col-xs-3"> 
    </div> 
    <div class="col-xs-2"> 
    </div> 
</div> 

пока они добавляют до 12.

Demo

Bootstrap Grid

Answer 3

Вариант 1 - Встроенный Forms:

использовать .FORM-рядный класс, чтобы отобразить ряд элементов формы и кнопок на одной горизонтальной строке

, но

Возможно, вам придется вручную обратиться к широкому ч и выравнивание

Вариант 2 - Использование сетки:

для более структурированных макетов форм, которые также отзывчивым вы можете использовать предопределенные классы сетки Bootstrap в

Ваш код, адаптированные к опции 2. Вы можете управлять шириной элементов, изменяя col-md- *.

<div class="form-group row"> 

    <div class="col-md-8" > 
    <input type="text" class="form-control" name="watch" value="" placeholder="watch"> 
    </div> 

    <div class="col-md-2" > 
    <div class="input-group"> 
     <span class="input-group-addon">$</span> 
     <input type="number" class="form-control" name="price" value="" placeholder="Price (optional)" style="width: 140px;"> 
    </div> 
    </div> 

    <div class="col-md-2"> 
    <span class="btn btn-primary" onclick="update($(this));"><span class="glyphicon glyphicon-upload" aria-hidden="true"></span> Update</span> 
    </div> 
</div> 

И вот как это выглядит Display inline elements in form by using the grid