javascript - Bootstrap 类导致输入元素移动到下一行

Question

当我将类 has-error 和 has-success 添加到最近的 div 时，为什么它使输入元素 #confirmPassword移到下一行？

HTML -

<form method = "post" action = "" ng-controller = "resettingCtrl as reset">

  <div class="form-group row">
    <label for="password" class="col-sm-2 form-control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="password" placeholder="Password" ng-model="reset.password">
    </div>
  </div>

  <div class="form-group row">
    <label for="confirmPassword" class="col-sm-2 form-control-label">Confirm</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="confirmPassword" placeholder="Confirm Password" ng-model="reset.confirmPassword">
    </div>
  </div>

  <div class="form-group row">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-info">Submit</button>
    </div>
  </div>

</form>

JS-

'use strict';

angular.module('Att1App')
    .controller('resettingCtrl', resettingCtrl);

  function resettingCtrl() {   
    var self = this;

    self.pass = "";
    self.confirmPass = "";

    angular.element(document.getElementById("confirmPassword")).on("input", function () {

        if(self.pass != document.getElementById("confirmPassword").value) {

                var div1 = document.getElementById('confirmPassword').closest('div');
                //div1.className = "has-error";
                return false;
            }

            else {

                var div2 = document.getElementById('confirmPassword').closest('div');
                div2.className = "has-success";
                return true; 
            }
        });
    }

Answer 1

当您尝试以这种方式将 has-success 类添加到 div 时:

var div2 = document.getElementById('confirmPassword').closest('div');
div2.className = "has-success";

您删除以前的 div 类。在这种情况下，它丢失了负责其宽度的 col-sm-10 类，这就是输入变大并移动到下一行的原因

将您的代码更改为:

var div2 = document.getElementById('confirmPassword').closest('div');
div2.className += " has-success";

或者如果加载它，则使用 jQuery:

$("#confirmPassword").closest('div').addClass("has-success");

这两种方法都会将新类添加到 div，但也会保留现有类。