Apply CSS to a line

0

At the moment it looks like the code below, but I wanted the inputs related to the Crachá, Pessoa, e Nome fields to be aligned with a <div class='col-lg-12'> . But when you put the button to open a modal next to input Crachá they are all misaligned and unformatted.

Follows a print of the screen when the code below runs:

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><!--FimdoscriptJQueryJS--><scriptsrc="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>
    
asked by anonymous 24.10.2017 / 20:14

1 answer

1

[Edit]

I can not say precisely, but input-group (I think style="padding-left:16px" is also a trick to try to fix something) should not be used in the same element with col- , it must be a child element.

However using form- combined with col- is quite difficult to hit, almost impossible, since its inutito is that labels are over, so it would be best to use everything with col % and form- just for your button that calls modal, should look like this:

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

Documentation

Begin by following the documentation examples as / are:

If you use the div class="row" classes without row, of course it will not work, you have to follow the Bootstrap documentation strictly, the documentation is very clear:

>
  

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

Translating:

  

Content should be placed inside columns and only columns can be immediate children of rows

There's no point in sticking out code without understanding what it actually does and what it does cols does not make sense either:

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

Probably the grids did not work and you tried a gambiarra.

Try the setting:

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

    
24.10.2017 / 20:20