Problem with component width with form-inline bootstrap

I'm building a form and I'm having trouble organizing the form's components the way I would like it to be.

When I use the col-md class of the bootstrap the components are getting all unconfigured and when I size the fields by CSS, when responsiveness is used the components are all misaligned.

What is the best way to get around the component widths?

I would like to increase the size of DropDown and also Input Text, leaving all components on the same line responsively.

<!--MENU--><divclass="page-bar">
    <ul class="page-breadcrumb">
        <li>
            <a href="/Pais/Index"> Pais </a>
            <i class="fa fa-circle"></i>
        </li>
    </ul>
</div>
<!-- MENU -->
</br>

<form class="form-inline" role="form">

    <!-- BOTAO NOVO -->
    <div class="form-group">
        <a href="javascript:;" class="btn red">
            Novo
            <i class="fa fa-user"></i>
        </a>
    </div>

    <!-- DROPDOWN CAMPOS PESQUISA -->
    <div class="form-group">
        <select class="form-control" id="dropdownColunasPesquisa">
            <option>Todos...</option>
            <option>Handle</option>
            <option>Descrição</option>
            <option>Sigla</option>
        </select>
    </div>

    <!-- TEXTBOX PESQUISA -->
    <div class="form-group">
        <input type="text" class="form-control" placeholder="Pesquisar">
    </div>

    <!-- BOTAO PESQUISAR -->
    <div class="form-group">
        <a href="javascript:;" class="btn red">
            Pesquisar
            <i class="fa fa-user"></i>
        </a>
    </div>

</form>