A在表中有一个表单,我的所有字段大小都很合适。但我有一个日期字段有一个.input组插件,这使得大小控制工作不太好。有办法解决它吗?
我尝试了一些方法来进行较小的输入,但插件已停止附加: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>
提前感谢!
正确的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将其删除。
根据您的代码,我在父div中添加了一个class half
.half {
width: 50%;
}
和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>
编辑或者如果你想使用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>
示例