Wyłącz reakcję Bootstrap, ustalając szerokość kontenera i używając pierwszego poziomu systemu siatki. Przeczytaj dokumentację, aby uzyskać więcej informacji.
Zwróć uwagę na brak <meta name="viewport" content="width=device-width, initial-scale=1">, który wyłącza funkcję powiększania witryn na urządzeniach mobilnych. Ponadto zresetowaliśmy szerokość naszego kontenera i zmieniliśmy pasek nawigacyjny, aby zapobiec zwijaniu, i w zasadzie dobrze jest iść.
Uwaga, komponent paska nawigacyjnego jest tutaj dość skomplikowany, ponieważ style jego wyświetlania są dość specyficzne i szczegółowe. Zastępuje, aby zapewnić, że style pulpitu nie są tak wydajne lub eleganckie, jak byśmy tego chcieli. Po prostu pamiętaj, że podczas korzystania z paska nawigacyjnego mogą pojawić się potencjalne problemy podczas budowania na podstawie tego przykładu.
Układy nieresponsywne podkreślają kluczową wadę stałych elementów. Żaden stały składnik, taki jak stały pasek nawigacyjny, nie będzie można przewijać, gdy widoczny obszar stanie się węższy niż zawartość strony. Innymi słowy, biorąc pod uwagę nieodpowiadającą szerokość kontenera wynoszącą 970 pikseli i widoczny obszar 800 pikseli, potencjalnie ukryjesz 170 pikseli treści.
Nie da się tego obejść, ponieważ jest to domyślne zachowanie przeglądarki. Jedynym rozwiązaniem jest responsywny układ lub użycie niestałego elementu.