CSS 如何使用 .input-group-addon (Bootstrap3) 控制 .input-group 中的输入大小？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18558463/
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 control size of input in .input-group with .input-group-addon (Bootstrap3)?
提问by staticdev
A have a form in a table, and all my field sizes are fitting well. But I have one datefield that has an .input-group-addon, an that is making the size control not work very well. Is there a way to fix it?
A 在表格中有一个表格，我所有的字段大小都很好。但我有一个日期字段，它有一个 .input-group-addon，这使得大小控制不能很好地工作。有办法解决吗？
I tried some ways to make a smaller input, but the addon stopped being attached: http://jsfiddle.net/93MpC/1/
我尝试了一些方法来进行较小的输入，但插件停止附加：http: //jsfiddle.net/93MpC/1/
The code from Fiddle:
来自小提琴的代码：
<div class="table-responsive">
<table class="table table-bordered">
<tr class="form-group">
<td><label class="field-label required-field">Name:</label></td>
<td><div class="input-group">
<input type="text" name="name" required id="id_name" class="form-control">
</div></td>
</tr>
<tr class="form-group">
<td><label class="field-label">Birthdate:</label></td>
<td><div class="input-group">
<input class="form-control datefield" id="id_dataNasc" name="dataNasc" type="text"><span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div></td>
</tr>
<tr class="form-group">
<td><label class="field-label">Birthdate:</label></td>
<td><div class="input-group"><div class="row">
<div class="col-lg-2"><input class="form-control datefield" id="id_dataNasc" name="dataNasc" type="text"></div>
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span></div>
</div></td>
</tr>
<tr class="form-group">
<td><label class="field-label">Birthdate:</label></td>
<td><div class="input-group">
<div class="row">
<div class="col-lg-3">
<div class="col-lg-2"><input class="form-control datefield" id="id_dataNasc" name="dataNasc" type="text"></div>
<div class="col-lg-1"><span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span></div>
</div>
</div>
</div></td>
</tr>
</table>
</div>
Thanks in advance!
提前致谢！
回答by Bojangles
The proper HTML for this requires another level of nesting. More information can be found in the input groupsdocumentation.
为此，正确的 HTML 需要另一个级别的嵌套。更多信息可以在输入组文档中找到。
The <td>with your sized input and addon should look like this:
在<td>与大小的输入和插件应该是这样的：
<td class="row">
<div class="col-md-6">
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</td>
The .col-*classes add padding left and right, so if that's a problem you can remove it with a little bit of CSS.
这些.col-*类向左和向右添加填充，因此如果这是一个问题，您可以使用一点 CSS 将其删除。
回答by Graham Walters
Taken from your code, I added a class half to the parent div. Here's the css:
从您的代码中，我向父 div 添加了一个半类。这是CSS：
.half {
width: 50%;
}
And the HTML (almost the same):
和 HTML（几乎相同）：
<div class="input-group half"><!-- here is .half -->
<input class="form-control datefield" id="id_dataNasc" name="dataNasc" type="text"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
EditOr if you want to use col here's a different option:
编辑或者如果你想使用 col 这里有一个不同的选项：
<div class="row">
<div class="col-md-3">
<div class="row">
<div class="col-md-3">Birthdate:</div>
<div class="col-md-9">
<div class="input-group">
<input class="form-control datefield" id="id_dataNasc" name="dataNasc" type="text"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
