Disabilita la reattività di Bootstrap fissando la larghezza del contenitore e utilizzando il primo livello di sistema della griglia. Leggi la documentazione per maggiori informazioni.
Si noti la mancanza di <meta name="viewport" content="width=device-width, initial-scale=1">, che disabilita l'aspetto dello zoom dei siti nei dispositivi mobili. Inoltre, abbiamo ripristinato la larghezza del nostro contenitore e modificato la barra di navigazione per evitare il collasso, e siamo praticamente a posto.
Come avvertimento, il componente della barra di navigazione è piuttosto complicato in quanto gli stili per visualizzarlo sono piuttosto specifici e dettagliati. Sostituzioni per garantire che la visualizzazione degli stili desktop non sia così performante o elegante come si vorrebbe. Tieni solo presente che potrebbero esserci potenziali problemi mentre costruisci su questo esempio quando usi la barra di navigazione.
I layout non reattivi evidenziano uno svantaggio chiave degli elementi fissi. Qualsiasi componente fisso, come una barra di navigazione fissa, non sarà scorrevole quando la finestra diventa più stretta del contenuto della pagina. In altre parole, data la larghezza del contenitore non reattivo di 970 px e una finestra di 800 px, potenzialmente nasconderai 170 px di contenuto.
Non c'è modo di aggirare questo in quanto è il comportamento predefinito del browser. L'unica soluzione è un layout responsive o utilizzando un elemento non fisso.