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，但也将保留现有的类。