1

Boa noite. Em uma das páginas do meu site, mudei a posição dos campos input para que ficassem ao lado das labels, originalmente era assim: http://tratspay.com/app/editar-produto.html . Após a minha modificação ficou assim: http://tratspay.com/app/editar-produto-teste.html porém os campos ficaram desalinhados como podem ver, gostaria de saber como alinhá-los.

2 Respostas 2

4

O que acontece é que por padrão a label do Bootstrap tem um margin-bottom: .5rem;. Vc tem que remover esse margin-bottom para o label alinhar com o input corretamente como vc pode ver na imagem abaixo:

Com a margem padrão
inserir a descrição da imagem aqui

Removendo a margem padão
inserir a descrição da imagem aqui

Minha sugestão é que vc coloque no label a classe nativa m-0, essa classe vai zerar o margin-bottom da label

inserir a descrição da imagem aqui

3
  • Bom dia, Hugo. Mais uma vez, obrigado pela força! Na verdade as labels já estão do jeito que eu quero, o que eu quero alinhar são os forms. Só consigo editar todos de uma vez? Não dá pra editar cada um individualmente de forma que todos fiquem alinhados?
    – Igor Rosa
    6/03/2019 às 13:57
  • @IgorRosa acho que não entendi bem o que vc quer dizer com esse alinhamento o que vc quer alinhar aonde mais precisamente? Achei que vc queria alinhar a label verticalmente com o input....
    – hugocsl
    6/03/2019 às 14:25
  • Acho que não estou sabendo explicar direito rs. A label com os nomes já estão alinhadas com os campos ao lado, porém, cada campo de inserção de dados está de um tamanho diferente, deixando uma estética esquisita no site, eu gostaria de deixar esses campos do mesmo tamanho. Se você observar na página que estou editando: tratspay.com/app/editar-produto-teste.html, dá pra visualizar o que estou tentando explciar.
    – Igor Rosa
    6/03/2019 às 14:41
1

Boa tarde meu caro, eu poderia te ajudar bastante você me autoriza lhe enviar um layout melhorado?

Esta comentendo alguns erros o uso de table já não é mais boa pratica a muito tempo Posso te ajudar mostrando como seu codigo pode ficar mais curto e mais responsivo, posso ajudalo vai me demandar uns 30 minutos?

Acabei fazendo aqui bem rapido essa atualização olhei seu layout e essa estrutura que fiz pode te resolver todos esses problemas, analise e ve se lhe cabe bem, alem de estar em boa pratica fica um pouco mais limpo de ver o codigo em si.

Deixei o fundo azul para destacar bem essa propriedade eh a classe bg-prymary de resto pode colocar tudo direto que vai alinhar como você pretende !

<div class="container bg-primary">

    <form>
        <div class="form-group row">
          <label for="staticEmail" class="col-sm-2 font-weight-bold col-form-label">ID de Produto:</label>
            <div class="col-sm-10">
            <input type="text" readonly class="form-control-plaintext" id="staticEmail" value="123451234">
          </div>
        </div>

        <div class="form-group row">
          <label for="staticEmail" class="col-sm-2 font-weight-bold col-form-label">Key de Integração:</label>
            <div class="col-sm-10">
            <input type="text" readonly class="form-control-plaintext" id="staticEmail" value="123445123">
          </div>
        </div>

        <div class="form-group row">
          <label for="staticEmail" class="col-sm-2 font-weight-bold col-form-label">Tipo de Produto:</label>
            <div class="col-sm-10">
            <input type="text" readonly class="form-control-plaintext" id="staticEmail" value="Produto Físico">
          </div>
        </div>

        <div class="form-group row">
          <label for="staticEmail" class="col-sm-2 font-weight-bold col-form-label">Tipo de de Cobrança:</label>
            <div class="col-sm-10">
            <input type="text" readonly class="form-control-plaintext" id="staticEmail" value="Produto Físico">
          </div>
        </div>

        <div class="form-group row">
          <label for="nomeProduto" class="col-sm-2 font-weight-bold col-form-label">Nome do Produto :</label>
          <div class="col-sm-10">
            <input type="text" class="form-control" id="nomeProduto" placeholder="Nome do Produto :">
          </div>
        </div>

        <div class="form-group row">
            <label for="descProduto" class="col-sm-2 font-weight-bold col-form-label">Descrição do Produto:</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="descProduto" placeholder="Descrição do Produto :">
            </div>
        </div>

        <div class="form-group row">
            <label for="emailSuporte" class="col-sm-2 font-weight-bold col-form-label">Email de Suporte :</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="emailSuporte" placeholder="Email de Suporte :">
            </div>
        </div>

        <div class="form-group row">
            <label for="valor" class="col-sm-2 font-weight-bold col-form-label">Valor</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="valor" placeholder="0,00">
            </div>
        </div>

        <div class="form-group row">
            <label for="categoria" class="col-sm-2 font-weight-bold col-form-label">Categoria</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="categoria" placeholder="Categoria">
            </div>
        </div>


        <div class="form-group row">
            <label for="qnt_max" class="col-sm-2 font-weight-bold col-form-label">Quantidade Máxima Por Compra :</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="qnt_max" placeholder="0,00">
                <small>Limite de Produtos que um clliente pode fazer na mesma compra.</small>
            </div>
        </div>

        <div class="form-group row">
            <label for="via" class="col-sm-2 font-weight-bold col-form-label">Produto entre via:</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="via" placeholder="Produto entre via:">
            </div>
        </div>

      </form>

inserir a descrição da imagem aqui

O layout que te enviei vai se ajustar a tela e a qualuquer resolução q vc colocar.

Espero ter ajudado e qualquer tipo de dúvida me chame

3
  • Sua intenção é nobre, mas isso não responde a pergunta. Além do mas caso ele esteja planejando enviar esse documento por email ou controlar melhor uma impressão, o mais indicado é a tabela mesmo. Logo vc vai ter uns pontos e vai poder comentar nas perguntas. Não use o campo de resposta para fazer comentários.
    – hugocsl
    5/03/2019 às 15:02
  • Ops hugo desculpe acabei fazendo e enviando antes de ver seu comentario, mas tomei alguns cuidado espero poder ajudar abraço 5/03/2019 às 15:30
  • Da forma que o Henrique explicou deu certo em partes aqui, consegui alinhar os campos mas bugou o conteúdo das abas, o conteúdo da segunda aba ficou misturado com o do primeiro.
    – Igor Rosa
    6/03/2019 às 13:51

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 .