बूटस्ट्रैप लेबल अगले इनपुट

Question

को मैं उसके बगल में बजाय इसे ऊपर बूटस्ट्रैप का उपयोग कर एक इनपुट क्षेत्र के लेबल डाल करने के लिए कोशिश कर रहा हूँ। form-horizontal कार्यों में इस रैपिंग, लेकिन यह एक फार्म (सिर्फ एक ajax कॉल कि मूल्य पढ़ता है) में वास्तव में नहीं है। क्या लेबल को इनपुट के बाईं ओर ले जाने का कोई तरीका है?

<div class="controls-row"> 
     <div class="control-group"> 
      <label class="control-label" for="my-number">ALabel</label> 

      <div class="controls"> 
       <input id="my-number" type="number"/> 
      </div> 
     </div> 
    </div>  

बेला http://jsfiddle.net/7VmR9/

Answer 1

div पर एक block तत्व है, जिसका अर्थ है कि यह के रूप में यह कर सकते हैं और input तत्व यह है के रूप में ज्यादा चौड़ाई ले जाएगा है। या तो div में label डाल या div एक inline-block तत्व बनाने:

आप labelinput तत्व के बगल में होना चाहते हैं।

Answer 2

आप वेबसाइट वे प्रदान की है, अच्छी तरह से प्रलेखित से सीधे मदद ले सकते हैं।

यहाँ Fiddle with Bootstrap css.

<div class="control-group"> 
<label class="control-label" for="inputEmail">Email</label> 
<div class="controls"> 
    <input type="text" id="inputEmail" placeholder="Email"> 
</div> 

Answer 3

हाँ है, तो आप बूटस्ट्रैप स्तंभ संरचना करके ऐसा कर सकते।

<div class="form-group"> 
    <label for="name" class="col-lg-4">Name:</label> 
    <div class="col-lg-8"> 
     <input type="text" class="form-control" name="name" id="name"> 
    </div> 
</div> 

यहाँ एक Bootply है Demo

Answer 4

<form class="form-inline"> 
    <div class="form-group"> 
     <label for="my-number">ALabel</label> 
     <input type="number" id="my-number" class="form-control"> 
    </div> 
</form> 

स्रोत: https://getbootstrap.com/docs/3.3/css/#forms-inline