Desative a capacidade de resposta do Bootstrap corrigindo a largura do contêiner e usando a primeira camada do sistema de grade. Leia a documentação para obter mais informações.
Observe a falta do <meta name="viewport" content="width=device-width, initial-scale=1">
, que desativa o aspecto de zoom de sites em dispositivos móveis. Além disso, redefinimos a largura do nosso contêiner e alteramos a barra de navegação para evitar o colapso, e estamos basicamente prontos.
Como um aviso, o componente navbar é bastante complicado aqui, pois os estilos para exibi-lo são bastante específicos e detalhados. Substituições para garantir que a exibição dos estilos de desktop não seja tão eficiente ou elegante quanto se gostaria. Esteja ciente de que pode haver armadilhas potenciais à medida que você constrói em cima deste exemplo ao usar a barra de navegação.
Layouts não responsivos destacam uma desvantagem importante para elementos fixos. Qualquer componente fixo, como uma barra de navegação fixa, não será rolável quando a janela de visualização se tornar mais estreita que o conteúdo da página. Em outras palavras, dada a largura do contêiner não responsivo de 970px e uma janela de visualização de 800px, você potencialmente ocultará 170px de conteúdo.
Não há como contornar isso, pois é o comportamento padrão do navegador. A única solução é um layout responsivo ou usar um elemento não fixo.