【发布时间】：2017-07-02 21:08:35
【问题描述】：
我正在为注册表单使用引导程序，但我想删除表单字段的左右两侧有多余的空间，我需要在表单输入字段结束后开始边框。
**HTML** **Bootstrap**
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bootstrap 3 Registration Form with Validation</title>
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css'>
<link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.0/css/bootstrapValidator.min.css'>
<link rel="stylesheet" href="css/style.css"> </head>
<style>
.container {
border: 1px solid black;
}
</style>
<body>
<div class="container">
<form class="form-horizontal" action=" " method="post" id="contact_form" onsubmit="return FormValidation();">
<fieldset>
<!-- Form Name -->
<center>
<h2><b>Registration Form</b></h2>
</center>
<br>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label">First Name</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input name="first_name" placeholder="First Name" id="first_name" class="form-control" type="text">
</div>
</div>
</div>
<!-- Success message -->
<div class="alert alert-success" role="alert" id="success_message">Success <i class="glyphicon
glyphicon-thumbs-up"></i> Success!.</div>
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label"></label>
<div class="col-md-4"><br>
<button type="submit" class="btn btn-warning"> SUBMIT <span class="glyphicon
glyphicon-send"></span> </button>
</div>
</div>
</fieldset>
</form>
</div>
<!-- /.container -->
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/js/bootstrapvalidator.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>I want the border asdescribed in image
更新了sn-p
.container { 边框：1px 纯黑色； } .fieldset { 填充：0px； }
<center> <h2><b>Registration Form</b></h2> </center> <br> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label">First Name</label> <div class="col-md-4 inputGroupContainer"> <div class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span> <input name="first_name" placeholder="First Name" id="first_name" class="form-control" type="text"> </div> </div> </div>
【问题讨论】：
-
老兄，你的代码搞砸了。你介意正确添加吗？显示一个 sn-p 会很棒...
:) -
您的意思是“边框”还是“页面中心”，请澄清，因为图片描述性不够
-
#Mark 我的意思是表格应该在小盒子里而不是大盒子里。页面的位置相对于页面来说足够好，但我的要求是减少容器边框和文本输入表单元素的结尾。表单容器框边框的宽度应等于文本输入+名字。
-
@MarkSchultheiss 我的意思是表格应该在小盒子里而不是大盒子里。页面的位置相对于页面来说足够好，但我的要求是减少容器边框和文本输入表单元素的结尾。表单容器框边框的宽度应等于文本输入+名字。
-
@PraveenKumar 添加了 sn-p
标签： jquery html css twitter-bootstrap