Zmiana szerokości znacznika select W Twitter Bootstrap

Jak zmienić szerokość pola wyboru podczas korzystania z Twitter bootstrap? Dodawanie klas input-xxlarge CSS nie działa (tak jak w przypadku innych elementów formularza), więc elementy z mojej listy rozwijanej są obecnie odcięte.

Author: janv8000, 2012-08-22
Source

7 answers

To działa dla mnie, aby zmniejszyć szerokość select tag; 

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

Możesz użyć dowolnej z tych klas; 

class="input-small"

class="input-medium"

class="input-large"

class="input-xlarge"

class="input-xxlarge"
 68
Author: Shakeeb Ahmad,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-12-06 23:51:11

Wykonałem obejście, tworząc nową klasę css w moim niestandardowym arkuszu stylów w następujący sposób: 

.selectwidthauto
{
     width:auto !important;
}

A następnie zastosowałem tę klasę do wszystkich moich elementów select albo ręcznie jak: 

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

Lub używając jQuery: 

$('select').addClass('selectwidthauto');
 22
Author: Pawan Pillai,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-07-05 06:03:09

W bootstrap 3 zaleca się rozmiar wejść, owijając je w znaczniki col-**-# div. Wydaje się, że większość rzeczy ma 100% szerokości, zwłaszcza .form-control Elementy.

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

 19
Author: user2653789,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-11-28 14:29:59

Możesz użyć czegoś takiego 

<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
Author: Moghira,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-08-17 11:42:44

Dla mnie Klasa Pawana css w połączeniu z display: inline-block (więc selekcje nie układają się w stos) działa najlepiej. I zawijam go w media-zapytanie, więc pozostaje przyjazny dla urządzeń mobilnych: 

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

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

}
 6
Author: Sean Grueboeck,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-03-11 09:39:19

Testowane samodzielnie, <select class=input-xxlarge> ustawia szerokość zawartości elementu na 530px. (Całkowita Szerokość elementu jest nieco mniejsza niż <input class=input-xxlarge> z powodu innego wypełnienia. Jeśli jest to problem, ustaw podkładki we własnym arkuszu stylów zgodnie z potrzebami.)

Więc jeśli to nie działa, efekt jest uniemożliwiany przez pewne ustawienie w Twoim arkuszu stylów lub może w użyj innych ustawień dla elementu.

 0
Author: Jukka K. Korpela,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-08-22 05:41:24

Z Bootstrap Użyj klasy input-md = medium, input-lg = large, aby uzyskać więcej informacji zobacz https://getbootstrap.com/docs/3.3/css/#forms-control-sizes

 0
Author: KristKing,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-11-28 14:13:11