How do I adjust Bootstrap 3 inline form width?

Question

I have a form that relies on Bootstrap 3:

full working example: http://jsfiddle.net/x7vk7/2/

The gist is that I have 2 columns for content. The first column is col-lg-4, and the second is col-lg-8. The first column displays a form, and the 2nd column displays results.

The problem I'm having is related to the width of the inline form elements in the Cases question. I used this post to figure out how to properly nest inline form elements in a horizontal form. Here's the relevant code I have for the Cases question:

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

The problem is that I want all 3 form elements for the Cases question to be on the same line. The first 2 elements are just integer fields, so it's not necessary for them to be very wide. What's the proper way to adjust the width of those first two integer fields so that all 3 fields fit on the same line?

Answer 1

If you want to achieve this all you have to do is to use this code insted of yours:

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

All the code in jsfiddle here.