Yatay Form - Kontrol etiketinin genişliğini ayarlamanın en iyi yolu?

Question

Twitter bootstrap için yeni ve yatay bir form ile çalışıyorum. Benim kodum şunun gibidir:

<form class="form-horizontal"> 
    <div class="control-group"> 
     <label class="control-label" for="whatever">Whatever</label> 
     <div class="controls"> 
      <select id="whatever" name="whatever"> 
       <option value="blah">Blah</option> 
      </select> 
     </div> 
    </div> 
    <div class="control-group"> 
     <label class="control-label" for="another">Another</label> 
     <div class="controls"> 
      <select id="something" name="something"> 
       <option value="MyEntry">MyEntry</option> 
      </select> 
     </div> 
    </div> 
    <button type="submit" class="btn">Search</button> 
</form> 

Bunu yaptığımda formun iyi görünüyor. Tek sorun kontrol etiketinin uzunluğu çok uzun olduğu için etiketlerin sol tarafında çok fazla boşluk var. Etiketi kısaltmanın bir yolu var mı bu yüzden fazla boşluk alamıyorum?

Teşekkürler.

Answer 1

Birkaç form sınıfı oluşturarak yaptım ve ihtiyacım olan boyutlara bağlı olarak bunları kullandım. Eğer kurulum ihtiyaçlarına göre kendi .control-label ve .controls genişlikleri can Tabii

<form class="form-horizontal form-small"> 

<!-- form body --> 

</form> 

: Ben küçük etiket ihtiyacın olursa

.form-small .control-label { 
    width: 100px; 
} 

.form-small .controls { 
    margin-left: 120px; 
} 

.form-medium .control-label { 
    width: 180px; 
} 

.form-medium .controls { 
    margin-left: 200px; 
} 

.form-xlarge .control-label { 
    width: 240px; 
} 

.form-xlarge .controls { 
    margin-left: 260px; 
} 

:

Bu

benim css olduğunu.

Bu yardımcı olur umarım!

Answer 2

<form class="form-inline" 
    ng-submit="addCategory(transaction, categoryText)" 
    style='display:inline;'> 
    <span class="span2"> 
     <label style='display:inline; width:140px'>{{param}}</label> 
    </span> 
    <input type="text" ng-model="categoryText" size="20" placeholder="add category"> 
</form> 

genellikle bir "yayılma" öğesinde sabit boyutu için ihtiyacı olan elemanı kapsayan, ancak bu tekrarlanan biçimlerini

Answer 3

üretilmesi için olan bir konteyner oluşturmak için kullanılarak deneyin:

<div class="set_inline_block_class_selector"> 
<label> 
    <input type="radio" name="example_radio">Bootstrap radio button with controlled label 
</label> 
</div> 

<style> 
.set_inline_block_class_selector label{ 
    display: inline-block; 
    } 
</style>