html - 在类行中的元素之间留下不必要的空白

Question

其实我不知道怎么描述这个问题。我设计了一个模型，其中我在 row 类中指定了一些元素。但是在 3 个元素之后它留下了不必要的空间。 Bootstrap 类 row 有问题吗？ Checkout the link. Click on register

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="row">
  <div class="col-sm-4 standard">
    <div class="form-group">
      <div class="col-sm-12">
      </div>
    </div>
  </div>
  <div class="col-sm-4 school_name">
    <div class="form-group">
      <div class="col-sm-12">
      </div>
    </div>
  </div>
  <div class="col-sm-4 occupation">
    <div class="form-group">
      <div class="col-sm-12">
      </div>
    </div>
  </div>

  <div class="col-sm-4 father_income">
    <div class="form-group">
      <div class="col-sm-12">
      </div>
    </div>
  </div>
  <div class="col-sm-4 blood_group">
    <div class="form-group">
      <div class="col-sm-12">
      </div>
    </div>
  </div>
  <div class="col-sm-4 type_of_wastage">
    <div class="form-group">
      <div class="col-sm-12">
      </div>
    </div>
  </div>

  <div class="col-sm-4 photo">
    <div class="form-group">
      <div class="col-sm-12">
      </div>
    </div>
  </div>
  <div class="col-sm-4 edit_photo" style="display: none;">
    <div class="form-group">
    </div>
  </div>
  <div class="col-sm-4 city">
    <div class="form-group">
      <div class="col-sm-12">
      </div>
    </div>
  </div>
  <div class="col-sm-4 address">
    <div class="form-group">
    </div>
  </div>


</div>

Answer 1

Bootstrap 网格语法错误。 Bootstrap 中的一行包含 12 列。如果一行中已经有 12 列，则必须打开一个新行。在您的情况下，您必须在使用 col-sm-4 类 3 次后打开一个新行。所以它必须看起来像这样:

<div class="row">
    <div class="col-sm-4"></div>
    <div class="col-sm-4"></div>
    <div class="col-sm-4"></div>
</div>
<div class="row">
    <div class="col-sm-4"></div>
    <div class="col-sm-4"></div>
    <div class="col-sm-4"></div>
</div>