1

Estoy creando un formulario dentro de un footer y así se ve en distintas resoluciones:

col-lg-4:

introducir la descripción de la imagen aquí

col-md-4 y col-sm-4: introducir la descripción de la imagen aquí

col-xs-12:

introducir la descripción de la imagen aquí

Como pueden notar, el label que contiene la palabra "Nuevo:" permanece alineado al input que contiene el "Rut" en todas las resoluciones, excepto en col-xs-12. He intentado de alinearlo mediante css pero no doy en el clavo.

No pongo el snipet porque curiosamente no se ve igual que en mi navegador, pero aquí está el código:

html:

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>LosTurnos</title>

<!-- Bootstrap CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Bootstrap Tema opcional -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<!-- Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="test.css">

</head>

<body>
<div id="footer">
  <div class="navbar navbar-inner  navbar-fixed-bottom navbar-inverse mifooter">
    <p class="muted credit">
      <div class="container-fluid">
        <div class="row">
          <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
            <form id="miform" action="trae_nuevo_empaque.php" class="form-inline">
              <div class="form-group"><label id="nuevito"><span>Nuevo:</span></label>
                <div class="input-group">
                  <div class="input-group-addon">Rut</div>
                  <input type="text" maxlength="8" class="form-control rut" placeholder="8 dígitos" required>
                </div>
                <div class="input-group">
                  <div class="input-group-addon">Nombre</div>
                  <input type="text" class="form-control nombre" placeholder="El primer nombre" required>
                </div>
                <div class="input-group">
                  <div class="input-group-addon">Apellido</div>
                  <input type="text" class="form-control" placeholder="Un apellido" required>
                </div>
                <div class="input-group emailpe">
                  <div class="input-group-addon">E-Mail</div>
                  <input type="email" class="form-control" placeholder="[email protected]" required>
                </div>
                <div class="input-group divenviareg">
                  <div class="input-group-addon">Enviar correo de registro</div>
                  <button type="submit" class="btn btn-info enviareg"><i class="glyphicon glyphicon-ok"></i></button>
                </div>
              </div>
            </form>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur ullam earum assumend</p>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae quos ipsa distinctio asp.</p>
          </div>
        </div>
      </div>
    </p>
  </div>
</div>
</body>
</html>

css:

.form-group > #nuevito{
    color: white;
    display: inline-block !important;
}
.form-group #nuevito span{
    padding-right: 10px !important;
    display: inline-block !important;
}
.input-group{
    max-width: 230px;
}
.rut{
    max-width: 134px;
}
.emailpe{
    min-width: 230px;
}
.input-group-addon, .form-control, .enviareg{
    padding-top: 1px;
    padding-bottom: 1px;
    padding-left: 4px;
    padding-right: 6px;
    height: 25px;
}
.enviareg{
    width: 56px;
    border-bottom-left-radius:0px;
    border-top-left-radius:0px;
}
.divenviareg{
    margin-top: 3px;
    min-width: 231px;
}

Alguna idea de cómo alinear la palabra "Nuevo:" con el input del Rut en la resolución col-xs-12?

Cualquier sugerencia para mejorar este formulario es bienvenida.

3
  • ¿Y si lo hacés flotar a la izquierda? Commented el 18 nov. 2016 a las 12:16
  • lo he intentado pero se desarma todo. Commented el 18 nov. 2016 a las 12:22
  • @RobertoSepúlvedaBravo Dentro de la línea de 12 puedes crear otra nueva línea que la divida en dos. Commented el 18 nov. 2016 a las 12:22

2 respuestas 2

1

// Problemas

Las razones por las que se "baja", son las siguientes:

  1. A partir de resoluciones menores a 768px, los todas las reglas form-* para un form.form-inline dejan de tener efecto.

  2. Ademas, las columnas con el estilo col-xs-12 comienza a ocupar el 100% del width y para que tu #miform de cierta forma siempre debe medir no mas y no menos de 240px.

// Solución

  1. Evita que los estilos para los form-* dentro del form.form-inline pierdan efecto poniendolos forzandolos para este "componente" para resoluciones menores a 768px.

  2. Indicar un ancho fijo a #miform.

Ejemplo:

@media (max-width: 768px) {
    #miform {
        min-width: 240px;
        max-width: 240px;
    }
    #miform.form-inline .form-group {
        display: inline-block;
        margin-bottom: 0;
        vertical-align: middle;
    }
    #miform.form-inline .input-group {
        display: inline-table;
        vertical-align: middle;
    }
    #miform.form-inline .input-group .form-control{
        vertical-align: middle;
        width: 100%;
    }
    #miform.form-inline .input-group .input-group-addon {
        width: auto;
    }
}

.form-group > #nuevito{
    color: white;
}
.form-group #nuevito span{
    padding-right: 10px;
}
.input-group{
    max-width: 230px;
}
.rut{
    max-width: 134px;
}
.emailpe{
    min-width: 230px;
}
.input-group-addon, .form-control, .enviareg{
    padding-top: 1px;
    padding-bottom: 1px;
    padding-left: 4px;
    padding-right: 6px;
    height: 25px;
}
.enviareg{
    width: 56px;
    border-bottom-left-radius:0px;
    border-top-left-radius:0px;
}
.divenviareg{
    margin-top: 3px;
    min-width: 231px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>LosTurnos</title>

<!-- Bootstrap CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Bootstrap Tema opcional -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<!-- Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="test.css">

</head>

<body>
<div id="footer">
  <div class="navbar navbar-inner  navbar-fixed-bottom navbar-inverse mifooter">
    <p class="muted credit">
      <div class="container-fluid">
        <div class="row">
          <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
            <form id="miform" action="trae_nuevo_empaque.php" class="form-inline">
              <div class="form-group">
				<label id="nuevito"><span>Nuevo:</span></label>
                <div class="input-group">
                  <div class="input-group-addon">Rut</div>
                  <input type="text" maxlength="8" class="form-control rut" placeholder="8 dígitos" required>
                </div>
              </div>
              <div class="form-group">
                <div class="input-group">
                  <div class="input-group-addon">Nombre</div>
                  <input type="text" class="form-control nombre" placeholder="El primer nombre" required>
                </div>
              </div>
              <div class="form-group">
                <div class="input-group">
                  <div class="input-group-addon">Apellido</div>
                  <input type="text" class="form-control" placeholder="Un apellido" required>
                </div>
              </div>
              <div class="form-group">
                <div class="input-group emailpe">
                  <div class="input-group-addon">E-Mail</div>
                  <input type="email" class="form-control" placeholder="[email protected]" required>
                </div>
              </div>
              <div class="form-group">
                <div class="input-group divenviareg">
                  <div class="input-group-addon">Enviar correo de registro</div>
                  <button type="submit" class="btn btn-info enviareg"><i class="glyphicon glyphicon-ok"></i></button>
                </div>
              </div>
            </form>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur ullam earum assumend</p>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae quos ipsa distinctio asp.</p>
          </div>
        </div>
      </div>
    </p>
  </div>
</div>
</body>
</html>

2
  • Está buena esta solución, pero la idea es que en las resoluciones col-sm + no quede de la misma forma que en col-xs Commented el 18 nov. 2016 a las 21:18
  • He actualizado la respuesta restringiendo la aplicaciones de estilos a resoluciones menores a 768px
    – Marcos
    Commented el 18 nov. 2016 a las 21:26
0

Prueba este código:

.form-group {
      max-width : 280px;
    }
    @media (min-width : 992px) {
      .form-group {
        max-width : 580px;
      }
      .col-left {
        padding-right: 5px;
      }
      .col-right {
        padding-left: 5px;
      }
    }
    .form-group #nuevito {
      color : white;
    }
    .input-group {
      width         : 100%;
      margin-bottom : 3px;
    }
    .divenviareg {
      margin-bottom : 0px;
    }
    .input-group-addon, .form-control, .enviareg {
      padding-top    : 1px;
      padding-bottom : 1px;
      padding-left   : 4px;
      padding-right  : 6px;
      height         : 25px;
    }
    .enviareg {
      width                     : 56px;
      border-bottom-left-radius : 0px;
      border-top-left-radius    : 0px;
    }
    .divenviareg > .input-group-addon {
      width : 100% !important;
    }
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="test.css">
 
</head>
<body>
<div id="footer">
  <div class="navbar navbar-inner  navbar-fixed-bottom navbar-inverse mifooter">
    <p class="muted credit">
    <div class="container-fluid">
      <form id="miform" action="trae_nuevo_empaque.php" class="form-inline">
        <div class="row form-group">
          <div class="col-xs-12 col-md-6 col-left">
            <div class="row">
              <div class="col-xs-12 col-md-2">
                <label id="nuevito"><span>Nuevo:</span></label>
              </div>
              <div class="col-xs-12 col-md-10">
                <div class="input-group">
                  <div class="input-group-addon">Rut</div>
                  <input type="text" maxlength="8" class="form-control rut" placeholder="8 dígitos" required>
                </div>
              </div>
            </div>
            <div class="input-group">
              <div class="input-group-addon">Nombre</div>
              <input type="text" class="form-control nombre" placeholder="El primer nombre" required>
            </div>
          </div>
          <div class="col-xs-12 col-md-6 col-right">
            <div class="input-group">
              <div class="input-group-addon">Apellido</div>
              <input type="text" class="form-control" placeholder="Un apellido" required>
            </div>
            <div class="input-group emailpe">
              <div class="input-group-addon">E-Mail</div>
              <input type="email" class="form-control" placeholder="[email protected]" required>
            </div>
          </div>
          <div class="col-xs-12">
            <div class="input-group divenviareg">
              <div class="input-group-addon">Enviar correo de registro</div>
              <button type="submit" class="btn btn-info enviareg">
                <i class="glyphicon glyphicon-ok"></i></button>
            </div>
          </div>
        </div>
      </form>
    </div>
  </div>
</body>
</html>

1
  • Está bien hecho pero sigue quedando "Nuevo:" sobre el input del rut :/ Commented el 18 nov. 2016 a las 21:15

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.