बूटस्ट्रैप 3: एक ही पंक्ति पर दो रूप

Question

मैंने पंजीकरण के लिए दो रूप बनाए हैं। जब मैं पृष्ठ पर नीचे कोड जोड़ता हूं तो दूसरा फ़ील्ड स्वचालित रूप से पहले के नीचे गिर जाता है। मैं इसे इसके अलावा जाना चाहूंगा।

<h1>Register</h1> 


<input type="text" class="form-control" placeholder="Forename" autofocus style="width:150px"> 
<input type="text" class="form-control" placeholder="Surname" autofocus style="width:150px"> 

यहाँ यह सामान्य html (currently) में कैसे दिखाई देते लग रहा है और वह यह है कि मैं क्या चाहते हैं यह की तरह लग रहे करने का एक उदाहरण है। लेकिन बूटस्ट्रैप में यह नई लाइन

Answer 1

बूटस्ट्रैप की साइट पर inline form styling का संदर्भ रखता है।

<div class="row"> 
    <div class="col-lg-2"> 
    <input type="text" class="form-control" placeholder=".col-lg-2"> 
    </div> 
    <div class="col-lg-3"> 
    <input type="text" class="form-control" placeholder=".col-lg-3"> 
    </div> 
    <div class="col-lg-4"> 
    <input type="text" class="form-control" placeholder=".col-lg-4"> 
    </div> 
</div> 

:

<form class="form-inline" role="form"> 
    <div class="form-group"> 
    <label class="sr-only" for="exampleInputEmail2">Email address</label> 
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email"> 
    </div> 
    <div class="form-group"> 
    <label class="sr-only" for="exampleInputPassword2">Password</label> 
    <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password"> 
    </div> 
</form> 

वैकल्पिक रूप से, आप भी use columns अगले एक-दूसरे के प्रपत्र तत्व डाल करने के लिए कर सकते हैं