使用col-md時自舉圖形錯誤位置

所以這是我得到：

但是當我添加col-md-6那麼它變得有點怪異：

正如你可以看到glyphicon內不輸入了。我可以像這樣在css中創建一個類：

.glyphicon-md { 
    padding-right: 20px; 
}

但爲什麼會發生這種情況？是否有可能解決這個問題，而不使用CSS。

<!-- LastName --> 
<div class="form-group col-md-6" ng-class="{'has-error has-feedback': form_addClient.lastName.$dirty && form_addClient.lastName.$invalid, 'has-success has-feedback': form_addClient.lastName.$dirty && form_addClient.lastName.$valid }"> 
    <label for="lastName">Last name</label> 
    <input type="text" name="lastName" id="lastName" class="form-control" ng-model="vm.client.lastName" required /> 

    <div class="help-block" ng-messages="form_addClient.lastName.$error" ng-if="form_addClient.lastName.$dirty"> 
     <div ng-message="required">The client needs a last name.</div> 
    </div> 

    <span ng-show="form_addClient.lastName.$dirty && form_addClient.lastName.$valid" class="glyphicon glyphicon-ok form-control-feedback"></span> 
    <span ng-show="form_addClient.lastName.$dirty && form_addClient.lastName.$invalid" class="glyphicon glyphicon-remove form-control-feedback"></span> 

</div>

來源

2015-10-18 Greg

只是嘗試與另一col-md-6不在同一div來包裝你的form-group格...查看本fiddle

的差異像下面

<div class="col-md-6"> 
    <div class="form-group" ng-class="{'has-error has-feedback': form_addClient.lastName.$dirty && form_addClient.lastName.$invalid, 'has-success has-feedback': form_addClient.lastName.$dirty && form_addClient.lastName.$valid }"> 
     <label for="lastName">Last name</label> 
     <input type="text" name="lastName" id="lastName" class="form-control" ng-model="vm.client.lastName" required /> 

     <div class="help-block" ng-messages="form_addClient.lastName.$error" ng-if="form_addClient.lastName.$dirty"> 
     <div ng-message="required">The client needs a last name.</div> 
     </div> 

     <span ng-show="form_addClient.lastName.$dirty && form_addClient.lastName.$valid" class="glyphicon glyphicon-ok form-control-feedback"></span> 
     <span ng-show="form_addClient.lastName.$dirty && form_addClient.lastName.$invalid" class="glyphicon glyphicon-remove form-control-feedback"></span> 

    </div> 
</div>

來源

2015-10-18 17:47:34

使用col-md時自舉圖形錯誤位置

回答

相關問題