如何使用.input-group-addon(Bootstrap3)控制.input-group中的输入大小？

Question

A表格中有一个表格,我所有的场地尺寸都很合适.但是我有一个带有.input-group-addon的日期字段,这使得大小控制不能很好地工作.有办法解决吗？

我尝试了一些方法来做一个较小的输入,但插件停止附加:http: //jsfiddle.net/93MpC/1/

来自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>

提前致谢!

Answer 1

适当的HTML需要另一层嵌套.可以在输入组文档中找到更多信息.

在<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>

这些.col-*类左右添加填充,所以如果这是一个问题,你可以用一点CSS删除它.