0

Estou com dificuldade de realizar posicionamento de componentes em css, nesse projeto estou utilizando as técnicas do bootstrap para fazer um formulário, e conforme imagem abaixo eu não consigo deixar os componentes centralizados certinho em uma linha quando coloco labels em cima de alguns componentes. Sou iniciante e nisso e tentei consertar com o css mas não consegui, pois assim que o navegados é redimensionado a responsividade fica de forma errada, segue imagens e código.

inserir a descrição da imagem aqui

<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>

4
  • tente o padding-top no divTeste <!-- BOTAO PESQUISAR --> <div class="form-group"> <div class="col-md-2" id="divTeste" style="padding-top:20px;"> 5/09/2017 às 18:19
  • @MarcoAntonioQuintal, até deu certo o que me disse, mas minha dúvida é um seguinte, quando eu redimensionar meu navegado para o tamanho da tela de um celular por exemplo, esse componente ainda assumirá essa configuração, teria como tirar para determinado tamanho de dela ? só queria deixar ela para quando for col-md no caso. 5/09/2017 às 18:23
  • Vai funcionar sim. 5/09/2017 às 19:16
  • vou colocar na resposta então 5/09/2017 às 19:16

1 Resposta 1

0

tente o padding-top no divTeste

<!-- BOTAO PESQUISAR --> 
<div class="form-group"> 
<div class="col-md-2" id="divTeste" style="padding-top:20px;"> 

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .