我有一个依赖 Bootstrap 3 的表单：
完整的工作示例: http://jsfiddle.net/x7vk7/2/ http://jsfiddle.net/x7vk7/2/
要点是我有两列内容。第一列是col-lg-4，第二个是col-lg-8。第一列显示表单，第二列显示结果。
我遇到的问题与案例问题中内联表单元素的宽度有关。我用了这个帖子 https://stackoverflow.com/questions/18429121/inline-form-nested-within-horizontal-form-in-bootstrap-3了解如何在水平表单中正确嵌套内联表单元素。这是我针对案例问题的相关代码：
<div class="form-group">
<label class="col-lg-2 control-label" for="id_current_case_count" data-placement="top" data-toggle="tooltip" title="How many cases have you seen?">Cases</label>
<div class="col-lg-10">
<div class="form-inline">
<div class="form-group">
<input class="form-control" id="id_current_case_count" min="0" name="current_case_count" type="number" />
</div>
±
<div class="form-group">
<input class="form-control" id="id_case_count_uncertainty" min="0" name="case_count_uncertainty" type="number" />
</div>
<div class="form-group">
<select class="form-control" id="id_case_count_interval" name="case_count_interval">
<option value="weekly">per week</option>
<option value="total">total</option>
</select>
</div>
</div>
</div>
</div>
问题是我希望案例问题的所有 3 个表单元素都位于同一行。前 2 个元素只是整数字段，因此它们不必太宽。调整前两个整数字段的宽度以使所有 3 个字段适合同一行的正确方法是什么？
如果你想实现this http://jsfiddle.net/paulalexandru/Q64XH/embedded/result/您所要做的就是使用此代码而不是您的代码：
<div class="content row">
<div class="col-xs-3" style="padding-right: 5px;">
<input class="form-control" id="id_current_case_count" min="0" name="current_case_count" type="number" />
</div>
<div class="col-xs-3" style="padding-right: 5px;">
<input class="form-control" id="id_case_count_uncertainty" min="0" name="case_count_uncertainty" type="number" />
</div>
<div class="col-xs-6">
<select class="form-control" id="id_case_count_interval" name="case_count_interval">
<option value="weekly">per week</option>
<option value="total">total</option>
</select>
</div>
</div>
所有代码在jsfiddle在这里 http://jsfiddle.net/paulalexandru/Q64XH/.
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
