Q:

bootstrap select elements with fixed width do not display inline

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?

A:

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

