bootstrap select elements with fixed width do not display inline - html

Question

I have the following list (where ... represents more):
<div class="form-group">
<label class="control-label col-sm-2" for="event_End Time">End time</label>
<div class="col-sm-10">
<select class="form-control" id="event_endtime_1i" name="event[endtime(1i)]" required="required" style="width: 20px">
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
...
</select>
<select class="form-control" id="event_endtime_2i" name="event[endtime(2i)]" required="required" style="width: 20px">
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
...
</select>
<select class="form-control" id="event_endtime_3i" name="event[endtime(3i)]" required="required" style="width: 20px">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
...
</select>
— <select class="form-control" id="event_endtime_4i" name="event[endtime(4i)]" required="required" style="width: 20px">
<option value="00">00</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
...
</select>
: <select class="form-control" id="event_endtime_5i" name="event[endtime(5i)]" required="required" style="width: 20px">
<option value="00">00</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
...
</select>
</div>
</div>
I want the nice styling that the form-control css declaration offers, but the problem is that it appears to display the select element as a block and not inline, because the result looks like this:
The select elements are supposed to be sitting next to each other but they are not even though I specified a really really small width, just to prove my point:
http://www.bootply.com/rmtvHeYqFa
What is the correct way to display form-control declarations inline in bootstrap, so my select elements sit next to each other nicely?

Answer 1

Simple fix: You can override the .form-control class to use display: inline
.form-control { display: inline; }
Here's a bootply showing the change
I will add though that this will override ALL your .form-control classes in your project, so, you might instead want to give the elements you want inline another class, and give that class the property display: inline instead - you might need to add !important to override bootstrap in this case e.g.
.new__class { display: inline !important; }
But avoid using !important if you can