1

Estou tentando acertar a altura de um button no formulário, mas ele aparece muito alto em relação aos campos: imagem do formulario

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<form>
<div class="col-lg-2">
  <label class="form-group">Categoria:
    <input class="form-control" type="text" name="cat">
  </label>
</div>
<div class="col-lg-2">
  <label class="form-group">Valor: 
    <input class="form-control" type="text" name="valor">
  </label>
</div>
<div class="col-lg-2">
  <button class="btn btn-primary form-control" type="submit">
    <i class="fa fa-floppy-o fa-2x" aria-hidden="true"></i>  Gravar</button>
</div>
</form>

1
  • tente postar o código todo
    – 13dev
    11/08/2017 às 19:00

2 Respostas 2

1

Primeiro, você está não está usando Bootstrap corretamente.

As classes de coluna, class="col-{xs, sm, md, lg}-{1-12}, em princípio deveriam ser usadas dentro de linhas, class="row", mas esse isso é o de menos.

A ideia do Bootstrap é criar um framework responsivo com foco na ideia de mobile first, ou seja, a ideia central é que você pense em aparelhos móveis primeiro, desta forma, a classe col-xs-* quer dizer eXtra Small (extra pequeno), se referindo à tela. col-sm-* quer dizer small (pequeno). col-md-*, medium (médio). col-lg-*, large (grande). Bem, mas isso se você não estiver pensando somente em dar suporte aos desktop.

Outra coisa é, os botões, incluindo os input tipo button e submit, têm suas próprias classes e form-control não é uma delas.

<div class="row">
    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-2">
        <label class="form-group">Categoria: <input class="form-control" type="text" name="cat"></label>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-2">
        <label class="form-group">Valor: <input class="form-control input-md" type="text" name="valor"></label>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-2">
        <button class="btn btn-primary btn-md" type="submit"><i class="fa fa-floppy-o fa-2x" aria-hidden="true"></i> Gravar</button>
    </div>
</div>

Exemplo no JSFiddle

1

Isso está acontecendo porque o botão está sem label, coloque alguma que já vai resolver o problema:

Clique em Executar e depois em Página Toda para ver como vai ficar na visualização que você postou na imagem.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<body>
<form>
<div class="col-lg-2">
  <label class="form-group">Categoria: 
    <input class="form-control" type="text" name="cat">
  </label>
</div>
<div class="col-lg-2">
  <label class="form-group">Valor: 
    <input class="form-control" type="text" name="valor">
  </label>
</div>
<div class="col-lg-2">
  <label class="form-group">Gravar 
    <button class="btn btn-primary form-control" type="submit"><i class="fa fa-floppy-o fa-2x" aria-hidden="true"></i> Gravar</button>
  </label>
</div>
</form>

2
  • Sua resposta não está correta. Botões não precisam de label, se precisassem seriam self-closing tags como os input. O que acontece é que ele colocou a classe form-control, usada em input no button.
    – user86792
    11/08/2017 às 19:40
  • Obrigado, Tony Montana. O form-control no button, foi uma tentativa estúpida para acertar o alinhamento do objeto. Colocar o label no button, também não resolve. Eu desenvolvo aplicativos para web, claro que a questão de ser responsivo é importante, mas a principio os forms serão utiiizados em pcs. 12/08/2017 às 14:18

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 .