如何调整Bootstrap 3内联表格宽度？

Question

我有一个依赖Bootstrap 3的表单:

完整的工作示例:http://jsfiddle.net/x7vk7/2/

要点是我有2列内容.第一列是col-lg-4,第二列是col-lg-8.第一列显示表单,第二列显示结果.

我遇到的问题与案例问题中的内联表单元素的宽度有关.我用这篇文章来弄清楚如何以水平形式正确嵌套内联表单元素.这是我对案例问题的相关代码:

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

问题是我希望Cases问题的所有3个表单元素都在同一行.前两个元素只是整数字段,因此它们不必非常宽.调整前两个整数字段宽度的正确方法是什么,以便所有3个字段都适合同一行？

Answer 1

如果你想实现这一点,你所要做的就是使用你的代码:

<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中的所有代码都在这里.