Изменить ширину тега select в Twitter Bootstrap

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

41
css twitter-bootstrap twitter-bootstrap-2

7 ответов

это работает для меня, чтобы уменьшить ширину тега select;

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

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

class="input-small"

class="input-medium"

class="input-large"

class="input-xlarge"

class="input-xxlarge"
68

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

.selectwidthauto
{
     width:auto !important;
}

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

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

или с помощью jQuery:

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

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

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

19

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

<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

10

для меня Паван это css класс в сочетании с дисплей: инлайн-блок (поэтому выбор не складывается) работает лучше всего. И я заворачиваю его в медиа-запрос, поэтому он остается мобильным:

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

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

}
6

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

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

0

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

0