Problema Campo Bootstrap

Olá amigos.

Tenho o seguinte campo:

<div class="form-group col-md-4 col-md-offset-1">
 <label>Funcionário(a)</label>
 <div class="input-group">
 <select class="form-control form_input_recebe_foco" id="funcionario" name="funcionario" autofocus onkeypress="return handleEnter(this, event)">
 <option value="">- Selecionar Funcionário(a) -</option>
 <?php
 $Sql = "SELECT .......";
 $Resultado = @executa($Sql);
 while ($linha = @pg_fetch_array($Resultado)){
 $id_pessoa = $linha["id_pessoa"];
 $pessoa_nome = $linha["nome"];
 if ($funcionario == $id_pessoa){
 echo "<option value='$id_pessoa' selected = 'selected'>$pessoa_nome</option>";}
 else{
 echo "<option value='$id_pessoa'>$pessoa_nome</option>";}
 }
 ?>
 </select>
 <span class="input-group-addon"><a href="#" class="glyphicon glyphicon-user" data-toggle="modal" data-target="#modal_cad_pessoa" title="Clique aqui para cadastrar uma nova Pessoa!"></a></span>
 </div>
</div>

	Este campo está ok. Porém quando implemento o código a seguir, ***o campo  diminui sua largura***:

<script type="text/javascript">
$(document).ready(function() {
 $('#funcionario').select2();
});
</script>

	Outro problema é quando reduzo o tamanho da tela, ele mantém o tamanho inicial, não apresentando responsividade.

	O que faço para resolver o problema?