Problem with width of components with form-inline bootstrap

Question

I am building a form and I am having trouble organizing the form components the way I would like.

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

How best to handle the widths of the components?

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

<!-- MENU -->
<div class="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>

Answer 1

With the form-inline you can use the attribute size, to determine the width of its inputs, but bootstrap repositions on the screen due to responsiveness.

If you use the form-horizontal, all fields will always be the same size.

One last tip for you to test, you can create a separate css style sheet and suppress the operation of some bootstrap property using ! Important:

.classe-nova{ width: 'x pixels' !important; }

Then you put this class in the element you want to change and recommend never to directly change the bootstrap classes, after all what serves on one page does not always look good on another. Hug.