Twitter Bootstrap: позиционирование кнопки справа от блока ввода уровня блока?

Question

У меня есть поле ввода и кнопку, определенный следующим образом:

<form class="form-inline"> 
     <input type="text" title= "language" class="input-block-level" placeholder="Insert Languages"/> 
     <button type="submit" class="btn btn-primary">Filter by Languages</button> 
    </form> 

Но кнопка отображается на второй строке. Можно ли поместить кнопку справа от поля ввода?

Answer 1

Я думаю, вы можете быть недопониманием использования input-block-level класса. Когда этот класс применяется к полю ввода, поле ввода принимает все доступную ширину.

В результате любой элемент, который вы размещаете рядом с ним, перевернется на следующую строку.

Если вам нужны элементы, чтобы быть бок о бок, снимите input-block-level и заменить более подходящим классом (input-mini, input-small, input-medium, input-large, input-xlarge, input-xxlarge или span классы).

Answer 2

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

form{overflow: hidden} 
form input{ 
    display: block; 
    width: 70%; 
    float: left; 
} 
form button{ 
    display: block; 
    width: 30%; 
    float: left; 
} 

Answer 3

Я использую input-xxlarge, но он все еще не достаточно большой. Как мне настроить ? Я пробовал что-то вроде .input-xxlarge {width: 1500px; !важный; высота: 30px! important; }, но это не переопределить его. - Parseltongue 13 мин. Назад

Осмотрите элемент с помощью инструментов для разработчиков (например, в Chrome, Safari и т. Д.) И проверьте, не превышают ли другие ширины и высоты ваши явные объявления. Я попытался изменить его на моем конце и был успешным, когда я изменил фактический класс в bootstrap.css