如何使bootstrap class ="label label-default"与输入相同的宽度

Question

我找到了prepend附加组件的示例,但没有找到默认标签.如何使标签宽度与输入相同？

<div class="control-group">
    <span class="label label-default">ChangeOrder Attn</span>
    <input ng-model="ChangeOrderAttn" class="form-control" type="text">
</div>

Answer 1

可能不是,Bootstrap但一般来说,输入有form-control,这就是为什么它width:100%如此简单,你可以将它应用于你span或只是添加display:block,在这种情况下,这也将消耗100%它的父亲的宽度.所以,如果你创建另一个class并使用它,例如(DEMO):

CSS:

.full-width {
    display:block;
}

HTML:

<div class="control-group">
    <span class="label label-default full-width">ChangeOrder Attn</span>
    <input ng-model="ChangeOrderAttn" class="form-control" type="text" />
</div>

然后span将获得100%宽度,这样您可以选择.full-width仅在需要时使用.只需通过添加另一个来修改行为class.如果需要styles,您也可以添加其他内容class.但是,Bootstrap - 3使用它的原生可能有一种现成的方法class.