0

Tenho um site baseado num template bootstrap, em uma das páginas adicionei um botão e por mais que eu dê o comando pra ficar alinhado à direita, ele sempre fica à esquerda e desalinhado em relação ao formulário.

Meu código:

<div class="row">
          <div class="col-lg-4">
            <fieldset class="form-group">
              <label>Produto:</label>
                                      <select class="form-control form-control-line">
                            <option>-- Selecione --</option>
                            <option>Nome do Produto A</option>
                            <option>Nome do Produto B</option>

                          </select>
          </fieldset></div>
          <div class="col-lg-4">
            <fieldset class="form-group">
              <label>Ocultar afiliados sem vendas</label>
                                      <select class="form-control form-control-line">
                            <option>-- Selecione --</option>
                            <option>Sim</option>
                            <option>Não</option>

                          </select>
          </fieldset></div>
          <div class="col-lg-4">
           <label>Classificar por::</label>
                                      <select class="form-control form-control-line">
                            <option>-- Selecione --</option>
                            <option>TOP Afiliados</option>
                            <option>Afiliados mais antigos</option>Novos Afiliadoss
                              <option>Afiliados com mais tráfego</option>


                          </select>
          </div>
    <button type="button" class="btn">Filtrar</button>

        </div>
2
  • você está utilizado col-lg-4 para cada select, altere para col-lg-3, incluido o botão, assim você subdivide o grid de forma correta. Commented 2/03/2019 às 2:53
  • Muito obrigado, Getulio!
    – Igor Rosa
    Commented 2/03/2019 às 4:29

2 Respostas 2

1

A pesar da baixa qualidade da sua pergunta, acho que posso presumir que esteja relacionado ao botão "Filtrar". É importante que adicione tais informações na sua pergunta, tal como trazer a parte do código para a pergunta.


Você inseriu o botão diretamente na linha do grid do Bootstrap (.row). O correto é adicionar uma coluna (.col) como container do seu botão. Aí você pode estilizar essa coluna posicionando o conteúdo onde quiser.

<div class="col-lg-12" style="text-align: right;">
    <button type="button" class="btn">Filtrar</button>
</div>

Repare que adicionei a classe .col-lg-12 que acaba ocupando as 12 colunas do grid. Para mais detalhes, vide a documentação do Bootstrap (link no final da resposta). Adicionei, também, o estilo text-align: right a fim de posicionar seu botão do lado direito. Adicionei direto no elemento (hard-coded), mas o melhor é fazer isso direto no arquivo de estilo do seu site (.css).

Veja o resultado:

Print

Leitura recomendada: Bootstrap - Grid System

1
  • 1
    Muitíssimo obrigado! Ajudou muito! Ainda estou aprendendo a programar.
    – Igor Rosa
    Commented 2/03/2019 às 4:29
-3

No Bootstrap 5 ele substitui o text-left e text-right por text-start e text-end

Passei a mesma situação e resolvi utilizando o text-end

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 .