2013-11-21 24 views
5

Satır içi radyo düğmelerinin bir satırına INPUT kısa bir metin eklemek için Bootstrappy yolu nedir?Satır içi radyo düğmelerine metin girişi ekleme

Telsiz düğmeleri listesinin sağında bulunan bir <div class="col-xs-2"> paketini yüklemeyi denedim, ancak bu, elbette onu kendi ızgara alanına yerleştiriyor. sort-eserleri üzerinde açık bir piksel genişliği kuruyor http://www.bootply.com/95891

tek şey:

Burada yatay radyolarla inline bir metin alanının istenilen sonuca ulaşmak hiçbiri birkaç varyantları, çalışırken benim bootply var INPUT, ancak formun boyutunun küçüldüğü satır içi satırda kalmaz.

cevap

9

Üzerinde herhangi genişliğini düzeltmek için .form-inline, o zaman olmayacak kullanabilirsiniz senin input:text:

enter image description here

<div class="container"> 
    <form class="form-inline" role="form"> 
    <div class="form-group"> 
     <label class="control-label">Amount</label> 
    </div> 
    <div class="form-group"> 
     <div class="radio"> 
     <label class="radio-inline control-label"> 
      <input type="radio" id="amount_25" name="amount" value="25" checked=""> 
      $25.00 
     </label> 
     </div> 
    </div> 
    <div class="form-group"> 
     <div class="radio"> 
     <label class="radio-inline control-label"> 
      <input type="radio" id="amount_50" name="amount" value="50"> 
      $50.00 
     </label> 
     </div> 
    </div> 
    <div class="form-group"> 
     <div class="radio"> 
     <label class="radio-inline control-label"> 
      <input type="radio" id="amount_100" name="amount" value="100"> 
      $100.00 
     </label> 
     </div> 
    </div> 
    <div class="form-group"> 
     <div class="radio"> 
     <label class="radio-inline control-label"> 
      <input type="radio" id="amount_other" name="amount" value="Other: $"> 
      Other: $ 
     </label> 
     </div> 
    </div> 
    <div class="form-group"> 
     <input placeholder="Amount" type="text" class="form-control" id="amount_actual" name="amount_actual" maxlength="5" data-rule-required="true" contenteditable="false"> 
    </div> 
    </form> 
</div> 

Bootply