title: Bootstrap inline form controls all wrap at the same time as their container gets narrower. How do I get them to wrap indvidually?
body: <p>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?</p>
  
  <p>Here is an example:
  <a href="http://jsfiddle.net/marvhen/MeB6g/19/" rel="nofollow noreferrer">http://jsfiddle.net/marvhen/MeB6g/19/</a></p>
  
  <pre><code>&lt;p&gt;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.&lt;/p&gt;
  &lt;div class="row"&gt;
      &lt;div class="col-md-12"&gt;
          &lt;form class="form-inline" role="form"&gt;
              &lt;div class="form-group"&gt;
                  &lt;label class="sr-only" for="a"&gt;Email address&lt;/label&gt;
                  &lt;input type="text" class="form-control" id="a" placeholder="a" /&gt;
              &lt;/div&gt;
              &lt;div class="form-group"&gt;
                  &lt;label class="sr-only" for="b"&gt;Password&lt;/label&gt;
                  &lt;input type="text" class="form-control" id="b" placeholder="b" /&gt;
              &lt;/div&gt;
              &lt;div class="form-group"&gt;
                  &lt;label class="sr-only" for="c"&gt;Password&lt;/label&gt;
                  &lt;input type="text" class="form-control" id="c" placeholder="c" /&gt;
              &lt;/div&gt;
          &lt;/form&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;hr /&gt;
  &lt;p&gt;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.&lt;/p&gt;
  &lt;div&gt;
      &lt;form&gt;
          &lt;div style="display:inline;"&gt;
              &lt;input type="text" id="d" /&gt;
          &lt;/div&gt;
          &lt;div style="display:inline;"&gt;
              &lt;input type="text" id="e" /&gt;
          &lt;/div&gt;
          &lt;div style="display:inline;"&gt;
              &lt;input type="text" id="f" /&gt;
          &lt;/div&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>