如何使bootstrap css输入附加按钮和错误跨度看起来不错

Question

我想使用一个组合输入复选框，当它丢失时也会显示所需的（角度）验证错误，但是我无法获得复选框加载项和帮助块以使其更好。这是标记：

<div class="form-group" ng-class="{'has-error': addressForm.street.$invalid && !addressForm.street.$pristine}">
    <div class="col-md-10">
        <div class="input-group">
            <input type="text" placeholder="Street" name="street" class="form-control" ng-model="address.street" required>
            <span class="help-block" ng-show="addressForm.street.$invalid && !addressForm.street.$pristine">Required</span>
            <span class="input-group-addon">
                <input type="checkbox" ng-model="address.listAddress"> List
            </span>
        </div>
    </div>
</div>

没有错误时看起来很好：

但是在出现错误时不行：

我尝试过重新排序，将错误范围更改为div，插入br等。任何帮助都非常有用。如果它没有更多的标记就可能会更加快乐（对html / css来说是新的，对我来说，如此多的字符需要说出看似简单的东西，这会让我感到很惊讶）。

Answer 1

您应该将所需范围移到input-group div之外。

<div class="col-md-10">
    <span class="help-block" ng-show="addressForm.street.$invalid && !addressForm.street.$pristine">Required</span>
    <div class="input-group">
        <input type="text" placeholder="Street" name="street" class="form-control" ng-model="address.street" required>
        <span class="input-group-addon">
            <input type="checkbox" ng-model="address.listAddress"> List
        </span>
    </div>
</div>