2016-07-23 44 views
-1

我在bootstrap中創建了一個登錄頁面3.3.6.I已經爲表單設置了col-sm-3,但是具有class =「form-control」的輸入覆蓋了這個並以全屏顯示。如果我從輸入中刪除class =「form-control」,那麼它工作正常。爲什麼是這樣?我該如何解決?bootstrap-form-control覆蓋col-sm-3

<!doctype html> 
 
<html> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Bootstrap</title> 
 
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> 
 
</head> 
 
<body> 
 

 

 
<form closs="col-sm-3"> 
 
\t 
 
<div class="form-group"> 
 
<label for="email">Email </label> 
 
<input type="email" placeholder="Enter email" class="form-control"></input> 
 

 
</div> 
 

 
<div class="form-group"> 
 
<label for="password">Password </label> \t 
 
<input type="password" placeholder="Enter email" class="form-control"></input> 
 

 
</div> 
 

 

 
<button class="btn btn-primary">Login</button> 
 
</form> 
 

 

 
<script type="text/javascript" src="js/bootstrap.min.js"></script> 
 
<script type="text/javascript" src="js/jquery-3.1.0.min.js"></script> 
 
</body> 
 
</html>

回答

0

我解決使用類= 「輸入的基團」 這一問題。我仍然沒有得到理由。

<form closs="col-sm-3"> 

<div class="form-group"> 
<label for="email">Email </label> 
<div class="input-group"> 
<input type="email" placeholder="Enter email" class="form-control">  </input> 
</div> 
</div> 

<div class="form-group"> 
<label for="password">Password </label> 
<div class="input-group"> 
<input type="email" placeholder="Enter email" class="form-control"> </input> 
</div> 

</div> 


<button class="btn btn-primary">Login</button> 
</form> 
0

我使用這個演示並添加CSS和JS

<form class="form-horizontal"> 
 
    <div class="form-group"> 
 
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label> 
 
    <div class="col-sm-10"> 
 
     <input type="email" class="form-control" id="inputEmail3" placeholder="Email"> 
 
    </div> 
 
    </div> 
 
    <div class="form-group"> 
 
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label> 
 
    <div class="col-sm-10"> 
 
     <input type="password" class="form-control" id="inputPassword3" placeholder="Password"> 
 
    </div> 
 
    </div> 
 
    <div class="form-group"> 
 
    <div class="col-sm-offset-2 col-sm-10"> 
 
     <div class="checkbox"> 
 
     <label> 
 
      <input type="checkbox"> Remember me 
 
     </label> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="form-group"> 
 
    <div class="col-sm-offset-2 col-sm-10"> 
 
     <button type="submit" class="btn btn-default">Sign in</button> 
 
    </div> 
 
    </div> 
 
</form>

解決了這個問題