Usando este código:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<label class="col-2 col-form-label">Email</label>
<div class="col-8">
<input type="text" class="form-control">
</div>
<div class="col-2">
text
</div>
</div>
</div>Si cambia el tamaño de la ventana al tamaño más pequeño, la cuadrícula se rompe.
Aquí está el enlace de Bootply .
Simplemente abra la vista previa y cambie el tamaño de su ventana al tamaño más pequeño, y la cuadrícula se romperá.
3 columnas deben permanecer en la misma fila, pero en el tamaño más pequeño, la última columna se desplaza a la fila inferior.
Esto sucede en ambas versiones ( 4 y 3.7 (col-xs-2) )
¿Cómo se puede arreglar esto?
Las columnas no pueden encogerse en un ancho de menos de 30px (debido al relleno) por lo que, a medida que el ancho de la pantalla se reduce, eventualmente las columnas se envuelven (apilan verticalmente). Para evitar esto, ajuste el relleno de las columnas dentro del row. Bootstrap 4 tiene una no-guttersclase para este propósito ...
https://www.codeply.com/go/XaBsD5AhJG
<div class="container">
<div class="row no-gutters">
<label class="col-2 col-form-label">Email</label>
<div class="col-8">
<input type="text" class="form-control">
</div>
<div class="col-2 pl-1">
text
</div>
</div>
</div>
Bootstrap 4 también tiene clases de clases de utilidad de relleno que se pueden usar para ajustar el relleno en elementos individuales. Por ejemplo, utilicé pl-1(padding-left) en la última columna para dejar un pequeño espacio entre la entrada y el "texto". Otra opción de Bootstrap 4 es usar flex-nowrapen el rowque evitará que se envuelva y se cree un desplazamiento horizontal cuando haya desbordamiento.
En Bootstrap 3 , debe agregar CSS para ajustar el relleno.
.no-gutters {
margin-right: 0;
margin-left: 0;
}
.no-gutters>[class*=col-] {
padding-right: 0;
padding-left: 0;
}
Este artículo se recopila de Internet, indique la fuente cuando se vuelva a imprimir.
En caso de infracción, por favor [email protected] Eliminar
Déjame decir algunas palabras