Texteingabe zu Inline-Optionsfeldern hinzufügen

Question

Wie kann Bootstrappy einen kurzen Text INPUT zu einer Reihe von Inline-Optionsfeldern hinzufügen?

Ich habe versucht, in einer <div class="col-xs-2"> auf der rechten Seite der Liste der Optionsfelder zu wickeln, aber das legt es natürlich in einem eigenen Rasterraum.

Hier ist meine bootply noch ein paar Varianten versuchen, von denen keine auf das gewünschte Ergebnis eines Textfeldes erhalten inline mit horizontalen Radios: http://www.bootply.com/95891

Die einzige Sache, die Art-Werke ist eine explizite Pixelbreite Einstellung auf die INPUT, aber das bleibt nicht in der Inline-Zeile, da das Formular kleiner ist.

Answer 1

Sie .form-inline verwenden könnte, dann werden Sie nicht auf jede Breite zu beheben haben Ihre 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