unable to define a horizental form using Bootstrap v2.0.4

I am working on an asp.net mvc-4 web application and i am using Bootstrap v2.0.4. now i want to show a list of drop-down lists beside each other . so i define the following :-

<form class="form-horizontal">
  <div class="control-group">
   <label class="control-label">Customer </label> @Html.DropDownList("CustomerList", (SelectList)ViewBag.Customers, "<< All Customers >>",new {@class = "controls"})
  </div>
  <div class="control-group">
   <label class="control-label">Status </label> @Html.DropDownList("StatuesList", (SelectList)ViewBag.OrderStatus, "<< All Statutes >>",new {@class = "controls"})
  </div>
  <div class="control-group">
   <label class="control-label">Type </label>   @Html.DropDownList("TypeList", (SelectList)ViewBag.OrderTypes, "<< All Types >>",new {@class = "controls"})
  </div>
   <div class="control-group">
   <label class="control-label">Category </label> @Html.DropDownList("CommissionList",  (SelectList)ViewBag.CommissionTypes, "<< All Commission Types >>",new {@class = "controls"}) <img src="~/Content/sortloading.gif" class="loadingimage" id="progress" /> 
  </div>
</form>
<br />
<form class="form-horizontal">
  <div class="control-group">
<label class="control-label" >Show   </label>    @Html.DropDownList("FilterSize1", new SelectList(ViewBag.PagedSizeOptions, "Value", "Text",Model.PageSize ), new { @class = "controls"}) <img src="~/Content/sortloading.gif" class="loadingimage" id="progress1" /> <label >Per Page   </label>
 </div>
</form>

but i got the following result , where the dropdownlists rendered under each other as follow:-

here is the related HTML as per the firbug tool:-

so can anyone adivce how to force my dropdown lists to expand horizontally ?

Thanks