0

No momento está desta forma como o código abaixo, mas queria que os inputs relacionados aos campos Crachá, Pessoa, e Nome ficassem alinhados dento de uma <div class='col-lg-12'>. Porém ao colocar o botão para abrir um modal ao lado do input Crachá elas ficam todas desalinhadas e sem formatação.

Segue um print da tela quando o código abaixo é executado: inserir a descrição da imagem aqui

index.php

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Início do sript JQuery JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Fim do script JQuery JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 

    <div class="row"> 

        <div class="col-lg-12">

            <!-- inicia row -->
            <div class="row"> 
                <div class="col-lg-3 input-group" style="padding-left:16px;"><!-- Inicio Input Crachá -->
                    <label for="ex1">Crachá: </label>
                    <input type="text" class="form-control idfunc" name='cracha' maxlength="5">
                    <span class="input-group-btn">
                    <button type="button" class="btn btn-secondary" style="margin-top:25px;" data-toggle="modal" data-target="#Modal_idfunc">...</button>
                    </span>
                </div><!-- Fim Input Crachá -->

            <!-- termina row -->
            </div>

            <!-- inicia row -->
            <div class="row">

                <div class="col-lg-12">
                    <div class="col-lg-3"><!-- Inicio Input Bairro -->
                        <label for="ex1">Pessoa: </label>
                        <input  type="text"  class="form-control" id="" name="id_pessoa" size="40"><br>
                    </div><!-- Fim Input Bairro -->
                    <div class="col-lg-6"><!-- Inicio Input Bairro -->
                        <label for="ex1">Nome </label>
                        <input  type="text"  class="form-control" id="" name="nome" size="40"><br>
                    </div>
                    <div class="checkbox col-lg-3" style="margin-top:30px;"><!-- Inicio checkbox Registro Inativo-->
                        <label>
                            <input type="checkbox" name="inativo" value="true" style="outline:none;">Funcionário Inativo
                        </label>
                    </div><!-- Fim checkbox Registro Inativo-->
                </div>

            <!-- termina row -->
            </div>

        </div>

    </div>

10
  • Isso só acontece depois de colocar o botão para abrir o modal?
    – Sam
    Commented 24/10/2017 às 18:18
  • Antes de colocar o botão, fica perfeito?
    – Sam
    Commented 24/10/2017 às 18:18
  • sim, não sei o porque disso
    – user92870
    Commented 24/10/2017 às 18:33
  • Veja se a resposta abaixo soluciona o problema. Ou então seria bom vc postar na pergunta uma imagem de "antes" de "depois".
    – Sam
    Commented 24/10/2017 às 18:36
  • vou editar o código com o que o Guilherme mandou e mostrar um print da tela
    – user92870
    Commented 24/10/2017 às 18:37

1 Resposta 1

1

[Edição]

Eu não posso afirmar com precisão, mas input-group (creio que o style="padding-left:16px" também seja uma gambiarra para tentar corrigir algo) não deve ser usado no mesmo elemento com col-, ele deve ser um elemento filho.

No entanto usar form- combinado com col- é bem dificil de acertar, quase impossivel, já que o seu inutito é que os labels fiquem por cima, então o melhor seria usar tudo com col mesmo e o form- apenas para o seu botão que chama o modal, deve ficar assim:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">


<div class="row">
    <div class="col-md-3">
        <label>Crachá:</label>
        <div class="input-group">
            <input type="text" name="cracha" class="form-control">
            <a class="btn input-group-addon" data-toggle="modal" data-target="#Modal_idfunc">...</a>
        </div>
    </div>
    <div class="col-md-3">
        <label>Pessoa:</label>
        <input type="text" name="id_pessoa" class="form-control">
    </div>
    <div class="col-md-3">
        <label>Nome:</label>
        <input type="text" name="nome" class="form-control">
    </div>
    <div class="col-md-3">
        <div class="checkbox" style="padding-top: 22px;">
            <label>
                <input name="inativo" value="true" type="checkbox"> Funcionário Inativo
            </label>
        </div>
    </div>
</div>


Documentação

Comece seguindo os exemplos da documentação como são/estão:

Falta o div class="row", se usar as classes cols sem row é claro que não vai funcionar, tem que seguir a documentação do Bootstrap estritamente, a documentação é bem clara:

Content should be placed within columns, and only columns may be immediate children of rows.

Traduzindo:

O conteúdo deve ser colocado dentro de colunas e somente as colunas podem ser crianças imediatas de linhas

Não adianta sair colando código sem entender o que ele faz de verdade amigo e outro detalhe esse <br> ali também não faz sentido:

 </div><br><!-- Fim Input Crachá -->

Provavelmente os grids não funcionaram e você tentou uma gambiarra.

Tente o ajuste:

<div class="row"> 

    <div class="col-lg-12">

        <!-- inicia row -->
        <div class="row"> 
            <div class="col-lg-3 input-group" style="padding-left:16px;"><!-- Inicio Input Crachá -->
                <label for="ex1">Crachá: </label>
                <input type="text" class="form-control idfunc" name='cracha' maxlength="5">
                <span class="input-group-btn">
                <button type="button" class="btn btn-secondary" style="margin-top:25px;" data-toggle="modal" data-target="#Modal_idfunc">...</button>
                </span>
            </div><!-- Fim Input Crachá -->

        <!-- termina row -->
        </div>

        <!-- inicia row -->
        <div class="row">

            <div class="col-lg-12">
                <div class="col-lg-3"><!-- Inicio Input Bairro -->
                    <label for="ex1">Pessoa: </label>
                    <input  type="text"  class="form-control" id="" name="id_pessoa" size="40"><br>
                </div><!-- Fim Input Bairro -->
                <div class="col-lg-6"><!-- Inicio Input Bairro -->
                    <label for="ex1">Nome </label>
                    <input  type="text"  class="form-control" id="" name="nome" size="40"><br>
                </div>
                <div class="checkbox col-lg-3" style="margin-top:30px;"><!-- Inicio checkbox Registro Inativo-->
                    <label>
                        <input type="checkbox" name="inativo" value="true" style="outline:none;">Funcionário Inativo
                    </label>
                </div><!-- Fim checkbox Registro Inativo-->
            </div>

        <!-- termina row -->
        </div>
</div>

3
  • vou mandar no chat, espera um segundo me chame pois não sei como criar kk sou novo aqui
    – user92870
    Commented 24/10/2017 às 19:02
  • Vamos continuar esta discussão no chat.
    – Syzoth
    Commented 24/10/2017 às 19:04
  • 1
    obrigado pela ajuda e por compartilhar seu conhecimento
    – user92870
    Commented 24/10/2017 às 20:11

Você deve fazer log-in para responder a esta pergunta.