1

tengo este formulario que esta diseñado con bootstrap 4.3.1, hasta ahora no me había percatado de este problema por que no había usado inputs-group con iconos.

El problema es que cuando hago uso de las clases para tener campos con iconos, hay campos que se vuelven más pequeños que los otros y no se ve estetico. He estado buscando la solución por hora pero no he podido hayar el problema, así que he acudido aquí y espero puedan ayudarme, muchas gracías.

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

<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <script defer src="https://use.fontawesome.com/releases/v5.7.2/js/all.js" integrity="sha384-0pzryjIRos8mFBWMzSSZApWtPl/5++eIfzYmTgBBmXYdhvxPc+XcFEk+zJwDgWbP" crossorigin="anonymous"></script>

</head>

<body>
    <div class="row">
        <div class="col-md-4 form-group row">
            <label for="cmbPreval" class="col-md-4 col-form-label">Prevalidador:</label>
            <select name="cmbPreval" id="cmbPreval" class="col-md-8 custom-select">
                <option value="40">prueba</option>
            </select>
        </div>
        <div class="col-md-4 form-group row">
            <label for="txtFechaInicio" class="col-md-4 col-form-label">Del:</label>
            <div class="col-md-8 input-group">
                <input type="text" id="txtFechaInicio" name="txtFechaInicio" class="form-control" data-link-format="dd/mm/yyyy" data-date-format="dd/mm/yyyy">
                <div class="input-group-append">
                    <button type="button" class="btn btn-outline-primary">
                        <i class="fas fa-calendar-alt"></i>
                    </button>
                </div>
            </div>
        </div>
        <div class="col-md-4 form-group row">
            <label for="txtFechaFin" class="col-md-4 col-form-label">Al:</label>
            <div class="col-md-8 input-group">
                <input type="text" id="txtFechaFin" name="txtFechaFin" class="form-control" data-link-format="dd/mm/yyyy" data-date-format="dd/mm/yyyy">
                <div class="input-group-append">
                    <button type="button" class="btn btn-outline-primary">
                        <i class="fas fa-calendar-alt"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4 form-group row">
            <label for="txtRSCliente" class="col-md-4 col-form-label">Buscar:</label>
            <input type="text" id="txtRSCliente" name="txtRSCliente" class="form-control col-md-8">
        </div>
        <div class="col-md-4 form-group row">
            <label for="cmbEmpresa" class="col-md-4 col-form-label">Buscar:</label>
            <input type="text" id="cmbEmpresa" name="cmbEmpresa" class="form-control col-md-8">
        </div>
        <div class="col-md-4 form-group row">
            <label for="txtRSCliente1" class="col-md-4 col-form-label">Buscar:</label>
            <input type="text" id="txtRSCliente1" name="txtRSCliente1" class="form-control col-md-8">
        </div>
    </div>
</body>

</html>

1 respuesta 1

1

Ya lo he arreglado, resulta ser que las clases input-group y form-group se añaden al mismo div.

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

<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <script defer src="https://use.fontawesome.com/releases/v5.7.2/js/all.js" integrity="sha384-0pzryjIRos8mFBWMzSSZApWtPl/5++eIfzYmTgBBmXYdhvxPc+XcFEk+zJwDgWbP" crossorigin="anonymous"></script>

</head>

<body>
    <div class="row">
        <div class="col-md-4 form-group row">
            <label for="cmbPreval" class="col-md-4 col-form-label">Prevalidador:</label>
            <select name="cmbPreval" id="cmbPreval" class="col-md-8 custom-select">
                <option value="40">prueba</option>
            </select>
        </div>
        <div class="col-md-4 form-group input-group row">
            <label for="txtFechaInicio" class="col-md-4 col-form-label">Del:</label>
            <input type="text" id="txtFechaInicio" name="txtFechaInicio" class="col-md-8 form-control" data-link-format="dd/mm/yyyy" data-date-format="dd/mm/yyyy">
                <div class="input-group-append">
                    <button type="button" class="btn btn-outline-primary">
                        <i class="fas fa-calendar-alt"></i>
                    </button>
                </div>
        </div>
        <div class="col-md-4 form-group input-group row">
            <label for="txtFechaInicio" class="col-md-4 col-form-label">Al:</label>
            <input type="text" id="txtFechaFin" name="txtFechaFin" class="col-md-8 form-control" data-link-format="dd/mm/yyyy" data-date-format="dd/mm/yyyy">
                <div class="input-group-append">
                    <button type="button" class="btn btn-outline-primary">
                        <i class="fas fa-calendar-alt"></i>
                    </button>
                </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4 form-group row">
            <label for="txtRSCliente" class="col-md-4 col-form-label">Buscar:</label>
            <input type="text" id="txtRSCliente" name="txtRSCliente" class="form-control col-md-8">
        </div>
        <div class="col-md-4 form-group row">
            <label for="cmbEmpresa" class="col-md-4 col-form-label">Buscar:</label>
            <input type="text" id="cmbEmpresa" name="cmbEmpresa" class="form-control col-md-8">
        </div>
        <div class="col-md-4 form-group row">
            <label for="txtRSCliente1" class="col-md-4 col-form-label">Buscar:</label>
            <input type="text" id="txtRSCliente1" name="txtRSCliente1" class="form-control col-md-8">
        </div>
    </div>
</body>

</html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.