Deshabilite la capacidad de respuesta de Bootstrap fijando el ancho del contenedor y usando el primer nivel del sistema de cuadrícula. Lea la documentación para obtener más información.
Tenga en cuenta la falta de <meta name="viewport" content="width=device-width, initial-scale=1">, que deshabilita el aspecto de zoom de los sitios en dispositivos móviles. Además, restablecimos el ancho de nuestro contenedor y cambiamos la barra de navegación para evitar que se colapse, y básicamente estamos listos para comenzar.
Como aviso, el componente de la barra de navegación es bastante complicado aquí, ya que los estilos para mostrarlo son bastante específicos y detallados. Anulaciones para garantizar que la visualización de estilos de escritorio no tenga el rendimiento o la elegancia que uno quisiera. Solo tenga en cuenta que puede haber problemas potenciales a medida que construye sobre este ejemplo cuando usa la barra de navegación.
Los diseños que no responden destacan un inconveniente clave de los elementos fijos. Cualquier componente fijo, como una barra de navegación fija, no se podrá desplazar cuando la ventana gráfica se vuelva más estrecha que el contenido de la página. En otras palabras, dado el ancho del contenedor que no responde de 970 px y una ventana gráfica de 800 px, es posible que oculte 170 px de contenido.
No hay forma de evitar esto, ya que es el comportamiento predeterminado del navegador. La única solución es un diseño receptivo o usar un elemento no fijo.