I am having difficulty positioning components in css, in this project I am using bootstrap techniques to make a form, and according to the image below I can not leave the components centralized right on a line when I put labels on some components . I am a beginner and in that and I tried to fix it with the css but I could not, as soon as the navigated is resized the responsiveness is wrong, it follows images and code.
<style>
</style>
<!-- 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>
<div class="row">
<!-- BOTAO NOVO -->
<div class="form-group">
<div class="col-md-1">
<a href="javascript:;" class="btn red">
Novo
<i class="fa fa-user"></i>
</a>
</div>
</div>
</div>
<div class="row">
<form role="form">
<!-- DROPDOWN CAMPOS PESQUISA -->
<div class="form-group">
<div class="col-md-3">
<label for="dropdownColunasPesquisa" class="control-label"> Selecionar campo: </label>
<select class="form-control" id="dropdownColunasPesquisa">
<option>Todos...</option>
<option>Handle</option>
<option>Descrição</option>
<option>Sigla</option>
</select>
</div>
</div>
<!-- TEXTBOX PESQUISA -->
<div class="form-group" id="divTxtPesquisa">
<div class="col-md-5">
<label for="txtPesquisa" class="control-label"> Filtro: </label>
<input type="text" class="form-control" placeholder="Pesquisar" id="txtPesquisa">
</div>
</div>
<!-- BOTAO PESQUISAR -->
<div class="form-group">
<div class="col-md-2" id="divTeste">
<button type="button" class="form-control btn default" id="btnPesquisar">
Pesquisar...
<i class="fa fa-user"></i>
</button>
</div>
</div>
</form>
</div>