Positioning elements on the screen

Navigation
1

How to position the elements without breaking

I have a screen with some inputs , I'm using bootstrap and defining the sizes of the fields, but they are still broken as in the following image.

IneedthemtobestraightandwithLabelontopofthem.

EditCode

<sectionclass="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

How did you add form-control

    
asked by anonymous 06.11.2018 / 18:46

1 answer

1

If your idea is to keep the labels on the input side, I suggest using a col-xx-xx in the label as well 

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

If you want them to be on one line and the input on another can use a 

<br>

After the label or leave the field inside the div

    
06.11.2018 / 19:00
How to start the Chips component of Materialize with default values? In totalcross, how do I show a popup when I click a button inside an accordion?