2015-10-06 37 views
1

我需要幫助我無法弄清楚爲什麼我的模態登錄表單不符合任何更改,並且看起來不像標準引導表單。Bootstrap模態表單非常難看

nav.php

<!-- Modal HTML --> 
    <div id="myModal" class="modal fade"> 
     <div class="modal-dialog"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
        <h4 class="modal-title">Login</h4> 
       </div> 
       <div class="modal-body"> 
        <p>Please log in below</p> 
        <form action="#" method="post" accept-charset="UTF-8"> 
        <div class="row"> 
         <div class="col-lg-4 col-md-4 col-sm-4"> 
          <label class="label" for="user" style="color: black">Username</label></br> 
          <input id="user" type="text" name="user" size="30" class="input-large" placeholder="username" required/> 
         </div> 
        </div> 
        <div class="row"> 
         <div class="col-lg-4 col-md-4 col-sm-4"> 
          <label class="label" for="pass"style="color: black">Password</label></br> 
          <input id="pass" type="text" name="pass" size="30" class="input-large" placeholder="Password"required/> 
         </div> 
        </div> 
        <label class="string optional" for="user_remember_me"> Remember me</label> <input id="user_remember_me" style="float: left; margin-right: 10px;" type="checkbox" name="user[remember_me]" value="1" /> 

        <input class="btn btn-success" style="clear: left; width: 100%; height: 32px; font-size: 13px; margin-bottom: 6px;" type="submit" name="submit" value="submit" /> 
       </form> 
       </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
       </div> 
      </div> 
      </div> 
     </div> 

這裏是什麼樣子 enter image description here

這裏是什麼,我希望它看起來像 enter image description here

+0

變更輸入類'類=「輸入 - 大」''到類=「形式控制」' – Shehary

回答

6

The documentation就是一個例子你的朋友。表單,輸入及其標籤需要連接到它們的form-groupform-control(以及其他類)。

<form> 
    <div class="form-group"> 
    <label for="exampleInputEmail1">Email address</label> 
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"> 
    </div> 
</form> 
+0

人們使用自舉和不使用類的形式控制「。到底是怎麼回事 ? –

+0

一票表決兄弟。 –