4.5.3　复选框与单选框作为addon

在.input-group-addon样式里，不仅可以放置label和icon，也可以放置复选框（checkbox）和单选框（radio），以达到如图4-25所示的效果。

图4-25　单选框和复选框的运行效果

使用方式也非常简单，只需要在.input-group-addon样式内放置带有checkbox和radio类型的input即可。示例如下：

<div class="row">
    <div class="col-lg-3">
        <div class="input-group">
            <span class="input-group-addon"><input type="checkbox"></span>
            <input type="text" class="form-control">
        </div>
    </div>
    <div class="col-lg-3">
        <div class="input-group">
            <span class="input-group-addon"><input type="radio"></span>
            <input type="text" class="form-control">
        </div>
    </div>
</div>

由于.input-group-addon样式在设置的时候没有限制元素，所以对上述两个类型的input，作者只是对其margin-top值进行了消除，以方便对齐。源码如下：

// 源码3403行
.input-group-addon input[type="radio"],
.input-group-addon input[type="checkbox"] {
  margin-top: 0; /* 如果addon是单选框或复选框，则取消margin-top */
}