Twitter'da seçme etiketinin genişliğini değiştirme Bootstrap

Question

Twitter önyükleme kullanırken, seçili alanın genişliğini nasıl değiştiririm? input-xxlarge CSS sınıflarının eklenmesi işe yaramaz gibi görünüyor (diğer form öğelerinde olduğu gibi), bu yüzden benim açılanmdaki öğeler şu anda kesiliyor.

Answer 1

Bu, seçim etiketinin genişliğini azaltmak için çalışır;

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

Bu sınıflardan herhangi birini kullanabilirsiniz;

class="input-small" 

class="input-medium" 

class="input-large" 

class="input-xlarge" 

class="input-xxlarge" 

Answer 2

Tek başına test edilen <select class=input-xxlarge>, öğenin içerik genişliğini 530 piksele ayarlar. (Elemanın toplam genişliği, farklı dolgu nedeniyle <input class=input-xxlarge>'dan biraz daha küçüktür. Eğer bu sorun yoksa, dolguları kendi stil sayfanızda istediğiniz gibi ayarlayın.)

Eğer işe yaramazsa, etki kendi stil sayfanızdaki bazı ayarlarla engellenebilir veya öğeye ait diğer ayarları kullanabilirsiniz.

Answer 3

şöyle benim özel stil yeni css sınıfını oluşturarak geçici bir çözüm yaptı:

.selectwidthauto 
{ 
    width:auto !important; 
} 

Sonra tüm seçkin elemanları elle gibi bu sınıf uygulanan:

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

Veya kullanarak jQuery:

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

Answer 4

Bootstrap 3'te, girişleri col-**-# div etiketlerine yerleştirerek boyutlandırmanız önerilir. Çoğu şeyin% 100 genişliğe, özellikle de .form-control öğeye sahip olduğu görülüyor.

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

Answer 5

beni Pawan en css sınıfı ekranla kombine için: inline-block (böylece seçer yığmayın) iyi çalışır. Ve ben bir medya sorgu alanına kaydırmak yüzden Cep Dostu kalır:

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

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

} 

Answer 6

Sen önyükleme kullanım sınıfı girdi-md = ortamla bu

<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

gibi bir şey kullanabilirsiniz , input-lg = büyük, daha fazla bilgi için bkz. https://getbootstrap.com/docs/3.3/css/#forms-control-sizes