부트 스트랩 및 다중 선택 컨트롤이 너무 큽니다.

Question

부트 스트랩을 사용하고 있으며 서로 옆에 두 개의 목록 상자 (하나는 한 달을 나타냄)와 선택한 달/연도를 이동하는 두 개의 단추가 있습니다. 리스트 박스. 이 모든 것을 내 페이지에 넣을 때 너무 넓습니다 (목록 상자는 필요한 부분이 넓습니다). 이 목록 상자의 폭은 작지만 높이가 같고 일반 부트 스트랩 양식 제어 목록 상자처럼 보이게하려면 어떻게해야합니까?

<div class="form-inline"> 
      <label for="selectMonth" class="control-label col-md-5">Period:</label> 
      <div class="col-md-7" style="display:inline"> 

       <select id="selectMonth" class="form-control" size="4"> 
        <option>Jan</option> 
        <option>Feb</option> 
        <option>Mar</option> 
        <option>Apr</option> 
        <option>May</option> 
        <option>Jun</option> 
        <option>Jul</option> 
        <option>Aug</option> 
        <option>Sep</option> 
        <option>Oct</option> 
        <option>Nov</option> 
        <option>Dec</option> 
       </select> 

       <select id="selectYear" class="form-control" size="4"> 

       </select> 

       <div class="btn-group-vertical"> 
        <button type="button" class="btn btn-default btn-primary" id="buttonMoveAll">>></button> 
        <button type="button" class="btn btn-default btn-primary" id="buttonMoveOne">></button> 
       </div> 

       <select id="selectFinal" class="form-control" size="4"> 

       </select> 
      </div> 
     </div> 

Answer 1

이 JSFiddle

<div class="form-inline col-md-10"> 
    <label for="selectMonth" class="control-label col-md-2">Period:</label> 

    <div class="col-md-4" style="display:inline"> 
     <select id="selectMonth" class="form-control" size="4"> 
      <option>Jan</option> 
      <option>Feb</option> 
      <option>Mar</option> 
      <option>Apr</option> 
      <option>May</option> 
      <option>Jun</option> 
      <option>Jul</option> 
      <option>Aug</option> 
      <option>Sep</option> 
      <option>Oct</option> 
      <option>Nov</option> 
      <option>Dec</option> 
     </select> 
    </div> 

    <div class="col-md-4" style="display:inline"> 
     <select id="selectYear" class="form-control" size="4"></select> 
     <div class="btn-group-vertical"> 
      <button type="button" class="btn btn-default btn-primary" id="buttonMoveAll">>></button> 
      <button type="button" class="btn btn-default btn-primary" id="buttonMoveOne">></button> 
     </div> 
     <select id="selectFinal" class="form-control" size="4"></select> 
    </div> 
</div> 

시도