2013-11-21 6 views
5

इनलाइन रेडियो बटनों की एक पंक्ति में INPUT संक्षिप्त टेक्स्ट जोड़ने का बूटस्ट्रैपी तरीका क्या है?इनलाइन रेडियो बटनों में टेक्स्ट इनपुट जोड़ें

मैंने रेडियो बटन की सूची के दाईं ओर <div class="col-xs-2"> में रैपिंग करने का प्रयास किया है, लेकिन यह निश्चित रूप से इसे अपने ग्रिड स्पेस में रखता है। http://www.bootply.com/95891

केवल बात यह है कि एक तरह से काम करता है-एक स्पष्ट पिक्सेल चौड़ाई पर स्थापित कर रही है:

मेरा bootply कुछ और वेरिएंट, जिनमें से कोई भी क्षैतिज रेडियो के साथ इनलाइन एक पाठ क्षेत्र के वांछित परिणाम के लिए प्राप्त कोशिश कर रही है INPUT, लेकिन यह इनलाइन पंक्ति में नहीं रहता है क्योंकि फ़ॉर्म का आकार छोटा है।

उत्तर

9

आप इस्तेमाल कर सकते हैं .form-inline, तो आप नहीं होगा पर किसी भी चौड़ाई तय करने के लिए अपने 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

संबंधित मुद्दे