Dezactivați capacitatea de răspuns a Bootstrap fixând lățimea containerului și utilizând primul nivel de sistem de grilă. Citiți documentația pentru mai multe informații.
Rețineți lipsa <meta name="viewport" content="width=device-width, initial-scale=1">, care dezactivează aspectul de zoom al site-urilor pe dispozitivele mobile. În plus, am resetat lățimea containerului nostru și am schimbat bara de navigare pentru a preveni prăbușirea și, practic, suntem gata.
Ca avertisment, componenta navbar este destul de complicată aici, deoarece stilurile de afișare sunt destul de specifice și detaliate. Anulări pentru a se asigura că afișarea stilurilor desktop nu este atât de performantă sau elegantă pe cât s-ar dori. Trebuie doar să știți că pot exista probleme potențiale pe măsură ce construiți pe deasupra acestui exemplu când utilizați bara de navigare.
Aspectele care nu răspund evidențiază un dezavantaj cheie pentru elementele fixe. Orice componentă fixă, cum ar fi o bară de navigare fixă, nu va putea fi derulată atunci când fereastra de vizualizare devine mai îngustă decât conținutul paginii. Cu alte cuvinte, având în vedere lățimea containerului care nu răspunde de 970 px și o fereastră de vizualizare de 800 px, veți ascunde potențial 170 px de conținut.
Nu există nicio cale de a ocoli acest lucru, deoarece este comportamentul implicit al browserului. Singura soluție este un aspect receptiv sau folosirea unui element nefix.