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类仅用于自定义行和列的填充。

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

正常，没有任何错误

How to list all dates between two dates

这是包含错误文本的错误输入字段，您可以看到用户名输入如何转到姓氏字段。

错误

Answer 1

您需要添加第一个和最后

类

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

Answer 2

以下是解决方案：

<form>
<div  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>
<div  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">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>

带有错误文本的Bootstrap表单

2 个答案: