Zmiana szerokości znacznika wyboru w serwisie Twitter Bootstrap

Question

Jak zmienić szerokość pola wyboru podczas korzystania z usługi Twitter bootstrap? Dodanie input-xxlarge klas CSS nie działa (tak jak robi to w innych elementach formularza), więc elementy w moim rozwijanym są obecnie obcięte.

Answer 1

To działa dla mnie, aby zmniejszyć szerokość znacznika wyboru;

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

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

class="input-small" 

class="input-medium" 

class="input-large" 

class="input-xlarge" 

class="input-xxlarge" 

Answer 2

Sam testowany, <select class=input-xxlarge> ustawia szerokość zawartości elementu na 530 pikseli. (Łączna szerokość elementu jest nieco mniejsza niż <input class=input-xxlarge> ze względu na różne wypełnienia.Jeśli to jest problem, ustaw klocki we własnym arkuszu stylów według potrzeb.)

Więc jeśli to nie działa, efekt jest zapobiegnie to niektórym ustawieniom we własnym arkuszu stylów lub w korzystaniu z innych ustawień dla elementu.

Answer 3

Zrobiłem obejście tworząc nową klasę css w moim niestandardowego arkusza stylów w następujący sposób:

.selectwidthauto 
{ 
    width:auto !important; 
} 

a następnie zastosowane do tej klasy do wszystkich moich wybranych elementów zarówno ręcznie jak:

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

Lub przy użyciu jQuery:

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

Answer 4

W bootstrap 3 zaleca się wprowadzanie wielkości wejściowych poprzez zawijanie ich w znacznikach div col-**-#. Wygląda na to, że większość rzeczy ma 100% szerokości, zwłaszcza elementy .form-control.

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

Answer 5

Dla mnie klasa css pawan w połączeniu z display: inline-block (tak wybiera się nie kumulują) działa najlepiej. I owinąć go w media-zapytania, więc pozostaje mobilnej:

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

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

} 

Answer 6

można użyć coś jak ten

<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

Answer 7

z bootstrap klasy użycie wejścia-MD = średnich , input-lg = duży, aby uzyskać więcej informacji, zobacz https://getbootstrap.com/docs/3.3/css/#forms-control-sizes