Question

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

＆＃13;

<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>

＆＃13;

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>

Answer 2

为寄存器

中的所有列设置一些最小高度

.modal-body .col-sm-4 {
    min-height: 86px;
}

Answer 3

您不能将所有这些列放在一行中。使用col-sm-4，每行只能有3列。之后，您需要创建另一行。因为在引导网格系统中，每行有12列。如果您需要一排所有软管，则必须使用col-sm-1。但我认为这不是一个好主意。更好的是，因为这里有10个元素，要么使用4行的col-sm-4，要么使用3行的col-sm-3。

Answer 4

你写错了语法.Bootstrap中的一行只包含12个块。这就是显示不必要空间的原因。

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

4 个答案: