html - 表单字段溢出 Bootstrap 表单

Question

我正在以我的简单形式使用 Bootstrap 网格框架。由于某种原因，表单域似乎溢出了表单边框框。见下图。

这没有意义，因为我所有的表单字段元素都在表单内。我的 html 在这里。我已确保导入 Bootstrap css 和 Bootstrap js。

<div class="container">
    <div class="row">
        <div class="col-md-12">

            <form class="col-md-8 form">
                <h4 class="form-heading">A form</h4>

                <div class="form-group">
                    <div class = "col-md-6">
                        <input type="text" name="input1" class="form-control"/>
                    </div>

                    <div class = "col-md-6">
                        <input type="text" name="input2" class="form-control"/>
                    </div>

                    <div class = "col-md-12">
                        <textarea name="terms" rows="8" class="form-control"></textarea>
                    </div>

                    <div class="col-md-12 text-center">
                        <button type="submit" class="btn btn-lg btn-primary">Submit</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

我的 CSS 在这里。

.form {
    max-width: 100%;
    border: solid black;
    padding-top: 20px;
    margin-top: 30px;
    float: none;
}

.form .form-heading {
    text-align: center;
}

.form .form-control {
    position: relative;
}

input {
    max-width: 100%;
    max-height: 100%;
}

请分享有关修复的任何想法。

Answer 1

这是由列 float 引起的这通常通过使用 row 来补救就 Bootstrap 而言。您在嵌套列时仅使用单个 row对于您拥有的所有这些级别的列。我要么使用额外的行，要么自己用 CSS 清除 float 。而且您可能不需要最外面的列。

这也没有多大意义:<form class="col-md-8 form"> .您的表单类的宽度设置为 100%，但您使用的列默认设置为宽度 66.66666667%。和 form-control也有 100% 的默认宽度。

Documentation

工作示例:

.form {
  border: solid black;
  margin: 20px 0;
  padding: 20px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-md-8 col-md-offset-2">
      <form class="form">

        <h4 class="form-heading text-center">A Form</h4>

        <div class="row">
          <div class="col-md-6">
            <div class="form-group">
              <input type="text" name="input1" class="form-control" />
            </div>
          </div>

          <div class="col-md-6">
            <div class="form-group">
              <input type="text" name="input2" class="form-control" />
            </div>
          </div>
        </div>

        <div class="row">
          <div class="col-md-12">
            <div class="form-group">
              <textarea name="terms" rows="8" class="form-control"></textarea>
            </div>
          </div>
        </div>

        <div class="row">
          <div class="col-md-12 text-center">
            <div class="form-group">
              <button type="submit" class="btn btn-lg btn-primary">Submit</button>
            </div>
          </div>
        </div>

      </form>
    </div>
  </div>
</div>