Skip to main content
adicionou 25 caracteres ao conteúdo
Fonte Link
Syzoth
  • 100,5mil
  • 23
  • 169
  • 361

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:[Edição]

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

Outro detalhe, euEu 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.

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>

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>

Outro detalhe, 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.

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

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>
adicionou 769 caracteres ao conteúdo
Fonte Link
Syzoth
  • 100,5mil
  • 23
  • 169
  • 361

Outro detalhe, 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 creio.

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 deva funcionar:

...
<!-- inicia row -->
<div class="row"> 
    <div class="col-lg-3"><!-- Inicio Input Crachá -->
        <div class="input-group">
            <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>
    </div><!-- Fim Input Crachá -->

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

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

Outro detalhe, 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 creio que assim deva funcionar:

...
<!-- inicia row -->
<div class="row"> 
    <div class="col-lg-3"><!-- Inicio Input Crachá -->
        <div class="input-group">
            <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>
    </div><!-- Fim Input Crachá -->

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

Outro detalhe, 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>

adicionou 1077 caracteres ao conteúdo
Fonte Link
Syzoth
  • 100,5mil
  • 23
  • 169
  • 361

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 https://getbootstrap.com/docs/3.3/css/:

Outro detalhe, 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 creio que assim deva funcionar:

...
<!-- inicia row -->
<div class="row"> 
    <div class="col-lg-3"><!-- Inicio Input Crachá -->
        <div class="input-group">
            <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>
    </div><!-- Fim Input Crachá -->

<!-- termina row -->
</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 https://getbootstrap.com/docs/3.3/css/:

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:

Outro detalhe, 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 creio que assim deva funcionar:

...
<!-- inicia row -->
<div class="row"> 
    <div class="col-lg-3"><!-- Inicio Input Crachá -->
        <div class="input-group">
            <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>
    </div><!-- Fim Input Crachá -->

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

Documentação

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

Fonte Link
Syzoth
  • 100,5mil
  • 23
  • 169
  • 361
Carregando