Bootstrap inline form controls all wrap at the same time as their container gets narrower. How do I get them to wrap indvidually?

Question

I've fiddled with the CSS (mainly display and line-height) to force it into submission but I'm wondering is something already built into the framework?

Here is an example: http://jsfiddle.net/marvhen/MeB6g/19/

<p>WITH BOOTSTRAP: The 3 text boxes in this form are inline when there
                   is enough space. When the container gets smaller they 
                   all stack and line up vertically but they all do this 
                   at the same time.</p>
<div class="row">
    <div class="col-md-12">
        <form class="form-inline" role="form">
            <div class="form-group">
                <label class="sr-only" for="a">Email address</label>
                <input type="text" class="form-control" id="a" placeholder="a" />
            </div>
            <div class="form-group">
                <label class="sr-only" for="b">Password</label>
                <input type="text" class="form-control" id="b" placeholder="b" />
            </div>
            <div class="form-group">
                <label class="sr-only" for="c">Password</label>
                <input type="text" class="form-control" id="c" placeholder="c" />
            </div>
        </form>
    </div>
</div>
<hr />
<p>WITHOUT BOOTSRAP: The 3 text boxes in this form are also inline when 
                     there is enough space. As the browser gets smaller 
                     however, they begin to wrap around one at a time until 
                     all 3 are lined up vertically.</p>
<div>
    <form>
        <div style="display:inline;">
            <input type="text" id="d" />
        </div>
        <div style="display:inline;">
            <input type="text" id="e" />
        </div>
        <div style="display:inline;">
            <input type="text" id="f" />
        </div>
    </form>
</div>

Answer 1

Bootstrap's CSS uses media queries to stack the form-controls on screen widths less than 768 pixels. To override this your could use CSS like this...

.form-inline .form-control {
    width:auto;
}
.form-inline .form-group {
    display: inline-block;
}

Demo: http://www.bootply.com/131062