Me gustaría actuar un div como barra lateral superpuesta solo en dispositivos móviles. Aparte del dispositivo móvil, debe actuar como div normal.

Código de muestra:

<div class="row">
   <div class="col-lg-3" id="sidebar">
     overlay sidebar only on mobile device
   </div>
   <div class="col-lg-9 col-12">
   </div>
</div>

¿Cómo hago que id="sidebar" actúe como div y barra lateral normal en el dispositivo móvil?

-1
sanoj lawrence 23 oct. 2019 a las 12:46

3 respuestas

La mejor respuesta

Puedes lograr usando la consulta de medios

@media screen and (max-width:767px){ //targets the mobile devices
 #sidebar{
   /*css code goes here*/
 }
}
0
JustCode 23 oct. 2019 a las 09:56

La mejor manera sería usar jquery para contraer su ancho cuando se haya alcanzado el tamaño de las pantallas móviles

0
Ajumobi Olamide 23 oct. 2019 a las 09:56

Debe usar d-block o d-none como esta:

d-sm-none or d-sm-block
0
Umut Eskitoğlu 23 oct. 2019 a las 14:34