引導窗體內部模態未正確對齊

我試圖使用引導（水平窗體）來創建模態窗體，並且該字段顯示在標籤下。任何想法如何解決它，所以輸入文本框將在標籤的權利，而不是他們之下？引導窗體內部模態未正確對齊

enter image description here

<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>

來源

2013-10-18 user2818430

你能告訴我們你的HTML和CSS –

對不起，我忘了！ – user2818430

其工作正常http://bootply.com/88453 – Manish

試試這個，

<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

來源

2013-10-18 08:28:58

仍然無法在模態...只是在頁面中... – user2818430

您需要將表格水平的聲明與模態體的聲明。這工作。

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

來源

2014-02-13 17:18:18 Javamav

生活的味道！完善。 – kamranbhatti585

我使用的引導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>

modal-horizontal-form

來源

2015-02-18 00:34:10

引導窗體內部模態未正確對齊

回答

相關問題