Bootstrap: более широкое поле ввода

Question

Как я могу сделать поле ввода шире, чем по умолчанию в Bootstrap Twitter?

Я пытаюсь создать более широкую форму поиска в классе hero-unit из примера .

Answer 1

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

 :class=>"input-mini"

 :class=>"input-small"

 :class=>"input-medium"

 :class=>"input-large"

 :class=>"input-xlarge"

 :class=>"input-xxlarge"

Answer 2

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

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

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

Answer 3

в начальной загрузке 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

Answer 4

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

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

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

Answer 5

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

Answer 6

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

Добавьте атрибут стиля к входным данным, чтобы удалить значение MaxWidth, например:

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

Answer 7

В начальной загрузке 4 они разработали больший входной файл.

Простым решением для увеличения размера входного файла является использование font-size

Добавьте свой стиль, например: input [type = "file"] { Размер шрифта: 35px }

Или вы можете создать один пользовательский класс и добавить к элементу управления вводом