aggiungere il testo ai pulsanti di opzione in linea

Question

Qual è il modo Bootstrappy di aggiungere un breve testo INPUT a una riga di pulsanti di opzione in linea?

Ho provato a eseguire il wrapping in un <div class="col-xs-2"> a destra dell'elenco di pulsanti di opzione, ma questo lo inserisce nel suo spazio di griglia, ovviamente.

Ecco la mia bootply cercando un paio di varianti, nessuno dei quali arrivano al risultato desiderato di un campo di testo in linea con le radio orizzontali: http://www.bootply.com/95891

L'unica cosa che sorta-di opere sta mettendo una larghezza esplicita pixel sullo il INPUT, ma questo non rimane nella riga in linea quando il formato viene ridimensionato.

Answer 1

Si potrebbe utilizzare .form-inline, allora non dovrà sistemare qualsiasi larghezza sul input:text:

<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