Html 如何使 bootstrap class="label label-default" 与输入的宽度相同
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25515038/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make the bootstrap class="label label-default" same width as the input
提问by texas697
I found examples with the prepend add-on but not the default label. How can make it so the label is the same width as the input?
我找到了带有 prepend 附加组件但没有默认标签的示例。如何使标签与输入的宽度相同？
<div class="control-group">
<span class="label label-default">ChangeOrder Attn</span>
<input ng-model="ChangeOrderAttn" class="form-control" type="text">
</div>
回答by The Alpha
Probably not Bootstrapbut generally speaking that, the input has form-controland that's why it has width:100%so simply you may apply this to your spanor just add display:block, in this case, this will also consume 100%width of it's parent. So, if you create another classand use that, for example (DEMO):
可能不是，Bootstrap但一般来说，输入具有form-control，这就是为什么它width:100%如此简单，您可以将其应用于您的span或只是添加display:block，在这种情况下，这也将消耗100%其父级的宽度。因此，如果您创建另一个class并使用它，例如（DEMO）：
CSS:
CSS：
.full-width {
display:block;
}
HTML:
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>
Then the spanwill get 100%width and this way you can optionally use .full-widthonly when needed. Just modify the behavior by adding another class. You may also add other stylesin that classif needed. But, there could be a ready made way in Bootstrap - 3using it's native class.
然后span将获得100%宽度，这样您就可以.full-width仅在需要时选择使用。只需通过添加另一个class. 如果需要styles，您也可以在其中添加其他内容class。但是，可以有一种现成的方法来Bootstrap - 3使用它的 native class。
回答by Pred
If you are using Bootstrap 3, you could set the width for the group and the label like this:
如果您使用的是 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>
回答by Kyle Ledbetter
It's not exactly what you want, but the closest thing you can do without custom CSS is:
这不完全是您想要的，但您可以在没有自定义 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>
