[英]Bootstrap input text in form-control is taking some unwanted margins
I wanted to create a form using bootstrap. 我想使用引导程序创建一个表单。 When tried to create it gave unwanted margin on the right of the input.
尝试创建时,它在输入的右侧提供了多余的边距。 I have tried to check out the margins in the browsers console.
我试图检查浏览器控制台中的边距。 It might be a minor thing but unable to figure it out.
这可能是一件小事,但无法弄清楚。 I am also attaching a screen shot.
我还附上了屏幕截图。
<div class="col-lg-8 col-md-8 col-sm-12">
<div class="panel panel-default">
<div class="panel-body">
<div id="tenantForm" class="container">
<center> <h4>Login Form</h4></center>
<hr />
<form>
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
</div>
<div>
Remove the class container
from <div id="tenantForm" class="container">
从
<div id="tenantForm" class="container">
删除类container
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="col-lg-8 col-md-8 col-sm-12"> <div class="panel panel-default"> <div class="panel-body"> <div id="tenantForm"> <center> <h4>Login Form</h4> </center> <hr /> <form> <div class="form-group"> <label for="email">Email address:</label> <input type="email" class="form-control" id="email"> </div> <div class="form-group"> <label for="pwd">Password:</label> <input type="password" class="form-control" id="pwd"> </div> <div class="checkbox"> <label><input type="checkbox"> Remember me</label> </div> <button type="submit" class="btn btn-default">Submit</button> </form> </div> </div> </div> </div>
Just remove class="container"
from <div id="tenantForm" class="container">
, live demo here 只需从
<div id="tenantForm" class="container">
删除class="container"
,即可在此处进行实时演示
https://codepen.io/msolimans/pen/KXjGBz https://codepen.io/msolimans/pen/KXjGBz
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.