我使用引导注册表单,但是我想要删除的表单域的左侧和右侧有额外的空间,我需要边框在表单输入域后面开始结束。在引导中的表单元素的左侧和右侧的额外空间
**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
更新片段
.container {边界:1px的纯黑色; } .fieldset { padding: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>
老兄,你的代码搞砸了。你介意正确添加它吗?显示一个片段将会很棒...':)' –
您的意思是“边框”或“页面中心”请澄清,因为图片没有足够描述 –
#马克 我的意思是窗体应该放在小框内。页面位置足够好,但是我的要求是减少容器边框和文本输入表单元素之间的空白。表单容器框边框的宽度应该等于textinput + First名称。 –