मोडल के अंदर बूटस्ट्रैप फॉर्म ठीक से संरेखित नहीं है

Question

मैंने बूटस्ट्रैप (क्षैतिज रूप) का उपयोग करके एक मॉडल फॉर्म बनाने की कोशिश की और फ़ील्ड लेबल के नीचे दिखाए गए हैं। कोई विचार यह है कि मैं इसे कैसे ठीक कर सकता हूं ताकि इनपुट टेक्स्ट बॉक्स लेबल के दाईं ओर हों और न कि उनके अंतर्गत?

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-header"> 
     <button type="button" class="close specialb" data-dismiss="modal" aria-hidden="true">×</button> 
     <h3 id="myModalLabel">Modal header</h3> 
    </div> 
    <div class="modal-body"> 

     <form class="form-horizontal" class="non-margined"> 
       <div class="control-group"> 
        <label class="control-label" for="firstName">First name:</label> 
        <div class="controls"> 
         <input type="text" id="firstName" placeholder="FirstName" /> 
        </div> 
       </div> 
       <div class="control-group"> 
        <label class="control-label" for="lastName">Last name:</label> 
        <div class="controls"> 
         <input type="password" id="lastName" placeholder="LastName" /> 
        </div> 
       </div> 
       <div class="control-group"> 
        <label class="control-label" for="emailAddress">Email Address:</label> 
        <div class="controls"> 
         <input type="password" id="emailAddress" placeholder="EmailAddress" /> 
        </div> 
       </div> 
     </form> 
    </div> 
    <div class="modal-footer"> 
     <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> 
     <button class="btn btn-primary">Save changes</button> 
    </div> 
</div> 

Answer 1

इस प्रयास करें,

<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a> 

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 

<h3 id="myModalLabel">Modal header</h3> 

    </div> 
    <div class="modal-body"> 
     <form class="form-horizontal"> 
      <div class="control-group"> 
       <label class="control-label" for="inputEmail">Email</label> 
       <div class="controls"> 
        <input type="text" id="inputEmail" placeholder="Email"> 
       </div> 
      </div> 
      <div class="control-group"> 
       <label class="control-label" for="inputPassword">Password</label> 
       <div class="controls"> 
        <input type="password" id="inputPassword" placeholder="Password"> 
       </div> 
      </div> 
      <div class="control-group"> 
       <div class="controls"> 
        <label class="checkbox"> 
         <input type="checkbox">Remember me</label> 
        <button type="submit" class="btn">Sign in</button> 
       </div> 
      </div> 
     </form> 
    </div> 
    <div class="modal-footer"> 
     <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> 
     <button class="btn btn-primary">Save changes</button> 
    </div> 
</div> 

Working demo

Answer 2

आप मोडल शरीर घोषणा के साथ में फार्म क्षैतिज घोषणा डालना होगा। यह काम।

<div class="modal-body form-horizontal">

Answer 3

मैं बूटस्ट्रैप v3.3.2 उपयोग कर रहा हूँ। मैं कल इसी तरह की स्थिति में था और यह मेरे लिए काम करता है।

<form class="form-horizontal" id="step2"> 
       <div class="form-group"> 
        <label for="name" class="col-sm-2 control-label">Name</label> 
        <div class="col-sm-10"> 
        <input id="name" class="form-control" type="text" placeholder="Enter Your Full Name" /> 
        </div> 
       </div> 
       <div class="form-group"> 
       <label for="email" class="col-sm-2 control-label">Email-Id</label> 
        <div class="col-sm-10"> 
        <input id="email" class="form-control" type="email" placeholder="Enter Your Email-Id" />     
        </div> 
       </div>