入力要素を次の行に移動させるブートストラップクラス

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

あなたは、このようにdivへhas-successクラスを追加しよう：

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に追加されますが、既存のクラスも保持されます。