Question

我正在使用bootstrap作为注册表单，但是我想删除表单字段左侧和右侧的额外空格，我需要在表单输入字段结束后立即启动边框。

**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 {border：1px solid black; } .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>

Answer 1

好的，首先，你添加类的方式是错误的。你应该有这样的结构：

集装箱
- 行
  - 列

这不是你的方式。所以，只需用这个替换你的代码。另外，您不为.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。

Answer 2

将以下内容添加到CSS中：

fieldset { padding: 0; }

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

2 个答案: