2

Estoy usando bootstrap. Tengo un input con la clase: "input-lg". El problema es que en teléfonos quiero que este input sea más pequeño. Yo puedo solucionar esto verificando la resolución desde javascript y quitandole esta clase en telefonos; tambien podría usar media queries para modificar el tamaño. Pero me gustaría saber si hay alguna manera más fácil, algo así como:

<input class="input-lg input-xs">

2 respuestas 2

3

Al estar utilizando Bootstrap como framework de trabajo puedes beneficiarte de sus estructuras para controlar tanto los tamaños como los espacios que ocupan tus inputs dándole el espacio que necesiten desde su contenedor mejor que aplicándoselo de manera directa.

Te dejo un ejemplo de buen uso de su estructura más básica en los diferentes breakpoints / media queries para un formulario.

input {width:100%; padding:5px 15px;margin: 10px 0 !important}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

<div class="container">
<div class="row">
<form class="form-group col-12 col-md-5 col-lg-3">
  <input type="text" placeholder="Nombre">
  <input type="text" placeholder="Apellido">
</form>
</div>
</div>

0
-1

Puedes usar bootstrap grid:

col-lg-column y col-xs-column //siendo column el numero de 1 a 13

<input class="col-lg-10 col-xs-5">

Mira este link:

bootstrap grid

1
  • 1
    La pantalla se divide en 12 columnas, no en 13. el 26 dic. 2019 a las 12:43

Tu Respuesta

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

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