2016-07-23 45 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>

解决了这个问题