How do you align the form in bootstrap?

Asked

Viewed 99 times

1

I’m not getting the form lined up, could someone give me a hand?

<div class="modal fade" id="modalJustificar" tabindex="-1" role="dialog" data-backdrop="static" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
     <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">Justificar Remessa</h4>
                    </div>
        <form class="form-horizontal" role="form" action="AdministracaoRemessa!cadastrar" method="post">    
                        <div class="row">
                            <div class="col-lg-12">
                            <div class="form-group">
                                    <label class="col-sm-2 control-label"><fmt:message key="label.isso.um.leibol" /></label>
                                    <div class="col-sm-6">
                                         <select id="comboPessoaJuridica" name="variavel.metodo" class="form-control select2">
                                                <option value ="">-</option>
                                                    <c:forEach items="${listadeObjetos.nomeDaentidade}" var="PJ">
                                                <option value="${fn:replace(PJ.codigo,'.','')}">${PJ.nome}</option>
                                           </c:forEach>
                                        </select>
                                    </div>
                                </div>
                           </div>
                        </div>
                <div class="row">    
                    <div class="form-group">
                        <label class="col-sm-2 control-label">Período</label>
                        <div class="col-sm-2 input-altura">
                            <input id="idVersaoProcesso" type="text" class="form-control" 
                                name="historicoRemessa.motivo" value=""/>
                        </div>
                            a
                    <div class="col-sm-2 input-altura">
                        <input id="idVersaoProcesso" type="text" class="form-control" 
                            name="historicoRemessa.motivo" value=""/>
                    </div>
                  </div>
               </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">Motivo</label>
                        <div class="col-sm-3 input-altura">
                         <input id="idVersaoProcesso" type="text" class="form-control" 
                            name="historicoRemessa.motivo" value=""/>
                     </div>
               </div>
         <div class="modal-footer">
            <input type="submit" class="btn btn-primary" value="Enviar"/>
        </div>
        </form>

That’s the screen image.

inserir a descrição da imagem aqui

What happens is that Unit Jurisdicionada Everything should be on my line along with the listebox. The Period with the textbox should be aligned with the Motive along with the textbox.

twitter-bootstrap bootstrap-3

1 answer

4


Dude your code is so messed up, it wasn’t even worth touching, it was div without closing, modal without the modal-body, form closing with the modal-footer inside... a mess... so I made this model from scratch.

Its main problem is that the label that you are using is much bigger than the column, then it breaks the line and pushes the col next down.

inserir a descrição da imagem aqui

I created a class called pt-0, it means that the label will have padding-top 0, and that little difference was enough to line up. There are other ways to treat this, but I believe this is the one that can suit you best and it’s very simple to do.

Follow the image code above

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Page Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" media="screen"
    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
  <link rel="stylesheet" type="text/css" media="screen"
    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" />
  <link rel="stylesheet" type="text/css" media="screen"
    href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
  <style>
    .pt-0 {
      padding-top: 0 !important;
    }
  </style>
</head>

<body>

  <!-- <div class="modal fade" id="modalJustificar" tabindex="-1" role="dialog" data-backdrop="static" aria-labelledby="myModalLabel" aria-hidden="true"> -->
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
            aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Justificar Remessa</h4>
      </div>

      <div class="modal-body">
      <form class="form-horizontal" role="form" action="AdministracaoRemessa!cadastrar" method="post">

        <div class="form-group">
          <label for="inputEmail3" class="col-sm-2 control-label pt-0">uma label maior que a coluna</label>
          <div class="col-sm-10">
            <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
          </div>
        </div>
        <div class="form-group">
          <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
          <div class="col-sm-10">
            <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
          </div>
        </div>
        <div class="form-group">
          <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
          <div class="col-sm-10">
            <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
          </div>
        </div>

      </form>
      </div>

      <div class="modal-footer">
        <input type="submit" class="btn btn-primary" value="Enviar" />
      </div>

    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>

</html>

Browser other questions tagged twitter-bootstrap bootstrap-3

You are not signed in. Login or sign up in order to post.