Estoy creando un formulario dentro de un footer y así se ve en distintas resoluciones:
col-lg-4:
col-xs-12:
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.