Mostrar div como barra lateral solo en dispositivos móviles usando bootstrap

Question

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?

html css bootstrap-4

-1

sanoj lawrence 23 oct. 2019 a las 12:46

Answer 1

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

Answer 2

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

Answer 3

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

Mostrar div como barra lateral solo en dispositivos móviles usando bootstrap

3 respuestas

Nuevas preguntas

html