使用col-md时bootstrap glyphicon错误的位置

Question

我将用一些图片来说明问题。

所以这就是我得到的：

但是当我添加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>

Answer 1

尝试将form-group div与另一个col-md-6不在同一div包裹...请检查此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>