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?
3 respuestas
Puedes lograr usando la consulta de medios
@media screen and (max-width:767px){ //targets the mobile devices
#sidebar{
/*css code goes here*/
}
}
La mejor manera sería usar jquery para contraer su ancho cuando se haya alcanzado el tamaño de las pantallas móviles
Debe usar d-block o d-none como esta:
d-sm-none or d-sm-block
Nuevas preguntas
html
HTML (HyperText Markup Language) es el lenguaje de marcado para crear páginas web y otra información que se mostrará en un navegador web. Las preguntas sobre HTML deben incluir un ejemplo mínimo reproducible y una idea de lo que está tratando de lograr. Esta etiqueta rara vez se usa sola y, a menudo, se combina con [CSS] y [javascript].