如何使引导 css 输入附加按钮和错误范围看起来不错答案

【问题标题】：How to make bootstrap css input add-on button and error span look good如何使引导 css 输入附加按钮和错误范围看起来不错
【发布时间】：2014-06-23 08:19:07
【问题描述】：

我想使用一个组合输入复选框，当它丢失时也会显示所需的（角度）验证错误，但我无法让复选框插件和帮助块发挥得很好。这是标记：

<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 来说是新的，让我感到惊讶的是需要这么多字符才能说出看起来很简单的东西）。

【问题讨论】：

您可以将所需的跨度移到input-group div 之外吗？
是的。哇！你能把它写成答案，这样我就可以标记正确了吗？谢谢。令人惊讶的是，我尝试了多少次重新订购，却没有想到那个。

标签： html css angularjs forms twitter-bootstrap

【解决方案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>

【讨论】：