如何使引导css输入插件按钮和错误跨度看起来良好

I'd like to use a combo input checkbox that also shows required (angular) validation error when it's missing, but I cannot get the checkbox add-on and the help-block to play nice. Here's the markup:

我想使用一个组合输入复选框，它在缺少时也显示了必需的(角度)验证错误，但是我无法获得复选框附加项和帮助块来进行良好的操作。这里的标记:

<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>

It looks fine when there's no error:

没有误差的时候看起来不错:

But not fine when there is an error:

但当出现错误时就不是很好了:

I've tried reordering, changing the error span to a div, inserting br, etc. Any help is much obliged. Would be even happier if it can be down without tons more markup (new to html/css and it's kind of amazing to me how so many chars are required to say something that seems simple).

我尝试过重新排序、将错误跨度更改为div、插入br等。如果没有更多的标记(html/css的新特性，而且我很惊讶这么多字符需要这么多字符来表达一些看起来很简单的东西)，那该多好啊!

1 个解决方案

#1

You should move the required span outside of the input-group div.

您应该将所需的span移动到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>