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

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

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

6 63
twitter-bootstrap

6 ответов:

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

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

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

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

 :class=>"input-mini"

 :class=>"input-small"

 :class=>"input-medium"

 :class=>"input-large"

 :class=>"input-xlarge"

 :class=>"input-xxlarge"
94

в bootstrap 3.0:

установить высоту с помощью классов, как .вход-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

17

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

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

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

9

есть также меньший, но называется "Вход-мини".

2

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

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

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