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，但也將保留現有的類。