Изменить ширину тега select в Twitter Загрузочный

Как изменить ширину поля выбора при использовании загрузочного лотка Twitter? Добавление классов input-xxlarge CSS, похоже, не работает (как и в других элементах формы), поэтому элементы в моем раскрывающемся списке в настоящее время отключены.

Ответ 1

Это позволяет мне уменьшить ширину метки тега;

<select id ="Select1" class="input-small">

Вы можете использовать любой из этих классов;

class="input-small"

class="input-medium"

class="input-large"

class="input-xlarge"

class="input-xxlarge"

Ответ 2

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

.selectwidthauto
{
     width:auto !important;
}

И затем применил этот класс ко всем моим элементам выбора либо вручную, как:

<select id="State" class="selectwidthauto">
...
</select>

Или используя jQuery:

$('select').addClass('selectwidthauto');

Ответ 3

В бутстрапе 3 рекомендуется вводить размер вложений, обертывая их в теги col-**-# div. Похоже, что большинство вещей имеют ширину в 100%, особенно .form-control.

https://getbootstrap.com/docs/3.3/css/#forms-control-sizes

Ответ 4

Вы можете использовать что-то вроде этого

<div class="row">
     <div class="col-xs-2">
       <select id="info_type" class="form-control">
             <option>College</option>
             <option>Exam</option>
       </select>
     </div>
</div>

http://getbootstrap.com/css/#column-sizing

Ответ 5

Для меня класс css Pawan в сочетании с дисплеем: inline-block (так что выбор не складывается) работает лучше всего. И я переношу его в медиа-запрос, поэтому он поддерживает Mobile Friendly:

@media (min-width: $screen-xs) {

    .selectwidthauto {
         width:auto !important;
         display: inline-block;
    }

}

Ответ 6

Протестировано один, <select class=input-xxlarge> устанавливает ширину содержимого элемента в 530px. (Общая ширина элемента немного меньше, чем у <input class=input-xxlarge> из-за различного заполнения. Если это проблема, установите прокладки в свою собственную таблицу стилей по желанию.)

Итак, если это не сработает, эффект может быть предотвращен некоторыми настройками в вашей собственной таблице стилей или, возможно, при использовании других параметров для элемента.

Ответ 7

с использованием класса загрузки bootstrap-md = medium, input-lg = large, для получения дополнительной информации см. https://getbootstrap.com/docs/3.3/css/#forms-control-sizes