在引导中的表单元素的左侧和右侧的额外空间

问题描述：

我使用引导注册表单，但是我想要删除的表单域的左侧和右侧有额外的空间，我需要边框在表单输入域后面开始结束。在引导中的表单元素的左侧和右侧的额外空间

**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> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
 
      <button type="submit" class="btn btn-warning">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SUBMIT <span class="glyphicon 
 
glyphicon-send"></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</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名称。 –

答

以下内容添加到您的CSS：

fieldset { padding: 0; }

尝试过但不工作 –

然后这很可能是由于特异性。你能从浏览器发布fieldset的CSS吗？ – Gerard

答

好了，首先，你加入班级的方式是错误的。你应该有这样的结构：

集装箱
- 行
  - 列

这不是有你的方式。所以，用这个替换你的代码。此外，您没有为.container做边框，但对于form：

form { 
 
    border: 1px solid orange; 
 
}

<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'> 
 
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css'> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-sm-4 col-sm-offset-4"> 
 
     <form class="form-horizontal" action=" " method="post" id="contact_form" onsubmit="return FormValidation();"> 
 
     <fieldset> 
 
      <!-- Form Name --> 
 
      <h2 class="text-center">Registration Form</h2> 
 
      <!-- 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> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
 
       <button type="submit" class="btn btn-warning">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SUBMIT <span class="glyphicon 
 
    glyphicon-send"></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</button> 
 
      </div> 
 
      </div> 
 
     </fieldset> 
 
     </form> 
 
    </div> 
 
    </div> 
 
</div>

注：

你不需要<b>为<hX>标签。
<center>已弃用，请使用class="text-center"。
将边框添加到form而不是.container。

谢谢你，你是冠军！ –

@RavindraSolanki不要忘了接受我的答案点击勾号按钮兄弟！一旦您觉得答案很好，请点击答案旁边的勾号来接受答案。欢迎！ –

在引导中的表单元素的左侧和右侧的额外空间

相关推荐