Desactiveu la capacitat de resposta de Bootstrap fixant l'amplada del contenidor i utilitzant el primer nivell del sistema de graella. Llegiu la documentació per a més informació.
Tingueu en compte la manca de <meta name="viewport" content="width=device-width, initial-scale=1">, que desactiva l'aspecte de zoom dels llocs en dispositius mòbils. A més, vam restablir l'amplada del nostre contenidor i vam canviar la barra de navegació per evitar que es col·lapsés, i bàsicament estem a punt.
Com a avís, el component de la barra de navegació és bastant complicat aquí, ja que els estils per mostrar-lo són força específics i detallats. Les substitucions per garantir que la visualització dels estils d'escriptori no sigui tan eficient o elegant com es voldria. Només tingueu en compte que hi pot haver problemes potencials a mesura que feu servir aquest exemple quan feu servir la barra de navegació.
Els dissenys que no responen destaquen un inconvenient clau dels elements fixos. Qualsevol component fix, com ara una barra de navegació fixa, no es podrà desplaçar quan la finestra gràfica sigui més estreta que el contingut de la pàgina. En altres paraules, tenint en compte l'amplada del contenidor que no respon de 970 px i una finestra gràfica de 800 px, potencialment amagareu 170 px de contingut.
No hi ha manera d'evitar això, ja que és el comportament predeterminat del navegador. L'única solució és un disseny responsiu o utilitzar un element no fix.