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可以采用现成的方法。

Answer 2

如果您使用的是Bootstrap 3，您可以设置组的宽度和标签，如下所示：

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

Answer 3

这不完全是你想要的，但没有自定义CSS你最接近的是：

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

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

3 个答案: