html - 带有错误文本的 Bootstrap 表单

Question

我尝试了很多方法，但找不到任何解决方案，我不明白什么是修复它的最佳方法。每当我将错误文本放在第一个输入中时，第三个输入会自动进入第二个输入右侧区域。我附上了屏幕截图。

HTML

<form class="row bl-row">
  <div class="col-sm-6 col-xs-12 bl-col">
    <div class="form-group has-error has-feedback nm">
      <label class="custom_lebel">First Name *</label>
      <input type="text" class="form-control cfc" placeholder="Write here your name...">
      <i class="glyphicon glyphicon-remove form-control-feedback"></i>
      <span class="help-block">Please fill out this field.</span>
    </div>
  </div>
  <div class="col-sm-6 col-xs-12 bl-col">
    <div class="form-group has-error has-feedback nm">
      <label class="custom_lebel">Last Name *</label>
      <input type="text" class="form-control cfc" placeholder="Write here your name...">
      <i class="glyphicon glyphicon-remove form-control-feedback"></i>
      <span class="help-block">Please fill out this field.</span>
    </div>
  </div>
  <div class="col-sm-6 col-xs-12 bl-col">
    <div class="form-group has-error has-feedback nm">
      <label class="custom_lebel">Username *</label>
      <input type="text" class="form-control cfc" placeholder="Write here your name...">
      <i class="glyphicon glyphicon-remove form-control-feedback"></i>
      <span class="help-block">Please fill out this field.</span>
    </div>
  </div>
  <div class="col-sm-6 col-xs-12 bl-col">
    <div class="form-group has-error has-feedback nm">
      <label class="custom_lebel">Email *</label>
      <input type="text" class="form-control cfc" placeholder="Write here your name...">
      <i class="glyphicon glyphicon-remove form-control-feedback"></i>
      <span class="help-block">Please fill out this field.</span>
    </div>
  </div>
</form>

这里的 bl-row 或 bl-col 类只是用于自定义行和列的填充。

这是正常的输入字段，没有任何错误，这里一切正常，但出现错误。

正常无错误

这是带有错误文本的错误输入字段，您可以在此处查看用户名输入与姓氏字段的关系。

有错误

Answer 1

您需要添加类first 和last

<form class="row bl-row">
  <div class="col-sm-6 col-xs-12 bl-col first">
    <div class="form-group has-error has-feedback nm">
      <label class="custom_lebel">First Name *</label>
      <input type="text" class="form-control cfc" placeholder="Write here your name...">
      <i class="glyphicon glyphicon-remove form-control-feedback"></i>
      <span class="help-block">Please fill out this field.</span>
    </div>
  </div>
  <div class="col-sm-6 col-xs-12 bl-col last">
    <div class="form-group has-error has-feedback nm">
      <label class="custom_lebel">Last Name *</label>
      <input type="text" class="form-control cfc" placeholder="Write here your name...">
      <i class="glyphicon glyphicon-remove form-control-feedback"></i>
      <span class="help-block">Please fill out this field.</span>
    </div>
  </div>
  <div class="col-sm-6 col-xs-12 bl-col first">
    <div class="form-group has-error has-feedback nm">
      <label class="custom_lebel">Username *</label>
      <input type="text" class="form-control cfc" placeholder="Write here your name...">
      <i class="glyphicon glyphicon-remove form-control-feedback"></i>
      <span class="help-block">Please fill out this field.</span>
    </div>
  </div>
  <div class="col-sm-6 col-xs-12 bl-col last">
    <div class="form-group has-error has-feedback nm">
      <label class="custom_lebel">Email *</label>
      <input type="text" class="form-control cfc" placeholder="Write here your name...">
      <i class="glyphicon glyphicon-remove form-control-feedback"></i>
      <span class="help-block">Please fill out this field.</span>
    </div>
  </div>
</form>