Cambiar clase de Bootstrap dependiendo de la resolución de pantalla

publicado por: Anonymous

Tengo un problema con una clases de bootstrap, tengo un div de clase .row y dentro de dicho div tengo dos mas con clases .col-10 y col-2, al momento de ejecutarse la aplicación en Desktop se ve bien, pero al pasarlo a la resolución del iPad, se sobreponen los div.

Lo intento hacer es que cuando la resolución de la pantalla sea de 768px(width) la clase de .col-10 cambie a .col-12 para que ocupe la pantalla completa y el otro div baje.

Intente hacer una función de JavaScript pero no me manda error ni nada y no hace el cambio que necesito.

function cambio(){
    var clase = document.getElementById("resize");
  if (window.screen.width < 768){
    clase.className = "col-12";
  }else{
    clase.className = "col-10";
  }
}

solución

Respecto a tu pregunta, estas mal enfocando el sistema de grillas de bootstrap,
para lo que quieres hacer no es necesario javascript.
Resulta que para lo que quieres solo necesitas usar las clases de col-*.

Entrando un poco mas a detalle, los breakpoint de bootstrap este las define como
col-sm-* , col-md-* , col-lg-* , col-xl-* Grid Bootstrap.
Siendo en ese orden (menor a mayor, a excepción de col-* ya que no tiene breakpoint, por eso es no funciona tu código)

Entonces ¿Cómo hago para que tenga cierto tamaño según el dispositivo?

La respuesta es sencilla solo usas las clase en el div para que funcione, ejemplo:

_x000D_

_x000D_

<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">_x000D_
<div class="container-fluid">_x000D_
  <div class="row">_x000D_
    <div class="col-4 col-sm-4 col-md-4 col-lg-8 col-xl-4 border">_x000D_
      Soy un div adaptable!!!_x000D_
    </div>_x000D_
    <div class="col-8 col-sm-8 col-md-8 col-lg-4 col-xl-8 border">_x000D_
      Soy un div adaptable!!!_x000D_
    </div>_x000D_
  </div>_x000D_
</div>

_x000D_

_x000D_

_x000D_

En ese snnipet le estoy diciendo que según el dispositivo ocupe cierto porcentaje de del row, si miras bien col-sm-4 esta clase col-sm se usa para dispositivos pequeños por ejemplo celulares, col-md-* generalmente se usa para tablet, col-lg-* se usa generalmente para pantallas de Computadoras y col-xl-* para pantallas con resolución sobre los 1140px, por eso solo debes usar las clases y la pantalla se adaptará sola.

El total de grillas que maneja son 1 a 12, y cada número tiene un porcentaje siendo el 12 el que representa el 100% del total de ancho del row.

Resumiendo entonces uso sm, md, lg, xl dependiendo de como quiero que se comporte por dispositivo y uso número de 1 al 12 para decir que porcentaje uso.

Espero que te ayude esta explicación. Saludos.

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *