bootstrap-select внутри сетки начальной загрузки, а макет панели становится слишком большим при изменении размера окна

Я пробую bootstrap-select вместо обычного выбора bootstrap ( ‹ select > with form-control class), и это здорово, пока я не попытаюсь изменить размер страницы. Selectpicker больше не вписывается в мою панель, если я уменьшаю окно, что является позором. Это мой html:

<div class="col-md-4">
 <div class="panel panel-default">
  <div class="panel-heading">Basic information</div>
  <div class="panel-body">
  <div class="input-group">
    <span class="input-group-addon">Chain</span>
     <select class="form-control selectpicker" data-live-search="true"> 
     </select>
   </div>
 </div>
</div>

Любой умный способ сделать выбор выравниванием внутри столбца/панели, даже если текст в параметрах выбора слишком велик (вместо этого обрезать его) при изменении размера окна? Он должен быть динамическим, чтобы вы могли изменять размер экрана до любого размера, который вы хотите, не нарушая панель. Изображение для демонстрации проблемы:

Изменить – загрузочная структура страницы:

<div class="container-fluid">
<div class="row">
 <div class="col-md-4">
  <div class="panel panel-default">
     <div class="panel-heading">Panel 1</div>
     <div class="panel-body">
      <div class="input-group">
         <span class="input-group-addon">Normal select (works)</span>
           <select class="form-control"></select>
      </div>
      <div class="input-group">
         <span class="input-group-addon">Selectpicker (breaks panel)</span>
          <select class="form-control selectpicker" data-live-search="true"> 
      </select></div>
     </div>
     </div>
    </div>
     <div class="col-md-4">

      </div>
      <div class="col-md-4">
      </div>
  </div>
</div>

https://jsfiddle.net/qbnxf2zm/