Bootstrap's built-in form controls all packaging at the same time as the container expands. How do I make them wrap?

Question

I was looking for CSS (mostly display and line height) to make it obey, but I wonder if something is already inline?

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 CSS uses media queries to stack form elements with a screen width of less than 768 pixels. To override this, you could use CSS like this ...

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

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