1

Como posicionar os elementos sem quebra

Possuo uma tela com alguns inputs, estou utilizando bootstrap e definindo os tamanhos dos campos, mas mesmo assim eles ficam quebrados como na imagem a seguir.

Campos quebrados

Preciso que eles fiquem retos e com a Label em cima deles.

Codigo Edit

<section class="content">
    <form action="http://localhost:8080/qs/index.php/cartao/editar" id="frmcartao" method="post" accept-charset="utf-8">
    <input type="hidden" name="seq_cartao" value="N" id="seq_cartao"  />

            <div class="row">
        <div class="col-md-12">
            <div class="box box-warning">
                <div class="box-body">
                    <div class="row">
                      <div class="form-group">
                      <label for="matricula" class="col-md-2 control-label">Matricula*</label>
                      <div class="col-md-2">
                <input type="text" name="matricula" value="" id="matricula" class="form-control"  />
                        </div>
                        </div>
                        <br>
                        <input type="hidden" name="seq_matricula" value="" id="seq_matricula"/>

                        <div class="form-group">
                        <label for="chip" class="col-md-2 control-label">Chip</label>
                        <div class="col-md-2">
                <input type="text" name="chip" value="" id="chip" maxlength="100" class="form-control"  />

                        </div>
                        </div>
                        <div class="form-group">
                        <label for="data_cancelamento" class="col-md-2 control-label">Data de Cancelamento</label>
                        <div class="col-md-2">
                <input type="text" name="data_cancelamento" value="" id="data_cancelamento" class="form-control"  />
                        </div>
                        </div>
                        <div class="form-group">
                        <label for="cod_barra" class="col-md-2 control-label">Código de Barras*</label>
                        <div class="col-md-2">
                <input type="text" name="cod_barra" value="" id="cod_barra" maxlength="50" class="form-control"  />
                        </div>
                        </div>
                        </div>

                    </div>

                    <div class="box-footer">
                    <button type="button" class="btn btn-default" onclick="document.location.href='http://localhost:8080/qs/index.php/cartao'">Cancelar</button>
                    <button type="submit" class="btn btn-warning pull-right">Confirmar</button>
                </div>
            </div>
        </div>
    </div>
    </form> </section>

Edit

Como ficou acrescentando form-control

Form-control

8
  • Cara se possível entra no navegador da um Ctrl+U e copia o código HTML já renderizado. Da forma como vc postou fica complicado pra te responder. Já com o código pronto já carregado na página fica mais fácil
    – hugocsl
    6/11/2018 às 17:56
  • @hugocsl Opa, editei o post e coloquei ele já renderizado. perdão pelo erro bobo. 6/11/2018 às 17:59
  • Coloque os inputs dentro de divs: jsfiddle.net/zcog3snf
    – Sam
    6/11/2018 às 18:00
  • Cara aqui renderizou direitinho imgur.com/6dP7UNd, provavelmente vc está usando algum CSS a mais ai, ou então é a forma como vc montou o PHP que não está correta... O mais estranho é que na sua imagem tem dois inputs ok e dois errados.... vc já conferiu o que tem de diferente entre o que fica errado e o que fica certo?
    – hugocsl
    6/11/2018 às 18:08
  • 1
    @hugocsl acrescentei um print e o código atualizado mostrando como ficou com o form-control 6/11/2018 às 18:23

1 Resposta 1

1

Se a tua ideia e manter as labels do lado do input, indico usar um "col-xx-xx" na label também

<div class="form-group">
    <label for="nome" class="col-md-2 control-label">Nome</label>        
    <div class="col-md-10">
      <input name="nome" type="text" class="form-control" >
    </div>
  </div>

Se quiser que eles fiquem em uma linha e o input em outra pode usar um

<br>

depois do label ou entao deixar o campo dentro da div

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 .