css - Bootstrap : add add-on below input

Question

如何使用 bootstrap css 在输入下方添加跨度？我需要做这样的事情:

Answer 1

是这样的吗？ http://jsfiddle.net/swm53ran/205/

您可以使用纯 CSS 来实现，如下所示:

<div class="col-xs-12">
    <input type="text" class="form-control has-add-on"/>
    <div class="btm-add-on">
        <strong>Some Text</strong> <input type="checkbox"/>
    </div>
</div>

.btm-add-on {
    background-color: #E6E6E6;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    padding: 5px;
    text-align: center;
    border: 1px solid #C0C0C0;
    border-top: none;
}
.has-add-on {
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}