Бутстрап: более широкое поле ввода

Ответ 1

Использовать загрузчик, встроенный в классы ввода-большого, input-medium,...: <input type="text" class="input-large search-query">

Или используйте свой собственный css:

• Дайте элементу уникальное имя класса class="search-query input-mysize"
• Добавьте это в свой файл css (а не файлы bootstrap.less или css):
  .input-mysize { width: 150px }

Ответ 2

Существуют различные классы для разных входов размера

 :class=>"input-mini"

 :class=>"input-small"

 :class=>"input-medium"

 :class=>"input-large"

 :class=>"input-xlarge"

 :class=>"input-xxlarge"

Ответ 3

в bootstrap 3.0:

Задайте высоты с помощью классов, таких как .input-lg, и установите ширину, используя классы столбцов сетки, такие как .col-lg - *.

Пример:

<div class="row">
    <div class="col-xs-2">
        <input type="text" class="form-control" placeholder=".col-xs-2">
    </div>
    <div class="col-xs-3">
        <input type="text" class="form-control" placeholder=".col-xs-3">
    </div>
    <div class="col-xs-4">
        <input type="text" class="form-control" placeholder=".col-xs-4">
    </div>
</div>

Источник: http://getbootstrap.com/css/#forms-control-sizes

Ответ 4

Я сделал более широкое поле ввода, используя класс span4 или span6 как класс.

<input type="text" class="span6 input-large search-query">

Таким образом, вам не нужен дополнительный пользовательский css, упомянутый ранее.

Ответ 5

Существует также меньшая, еще называемая "input-mini".

Ответ 6

Я собираюсь предположить, что у вас была та же проблема, что и я. Несмотря на то, что вы указываете большие размеры для TextBox и отмечаете его как важный, поле не будет увеличиваться. Вероятно, это связано с тем, что в файле site.css MaxWidth устанавливается на 280 пикселей.

Добавьте атрибут стиля к вашему вводу, чтобы удалить MaxWidth следующим образом:

<input type="text"  style="max-width:none !important" class="input-medium">