Questão de Programação — Web — INSTITUTO AOCP 2023

Bootstrap 5: Grid Responsivo e Classes Utilitárias

Gabarito: letra C. A alternativa correta combina navbar + fixed-top (barra fixa no topo), container (conteúdo centralizado), row (linha do grid), col-lg-9 e col-lg-3 (colunas que se empilham abaixo de 992px e ficam lado a lado a partir desse breakpoint) e ms-auto na coluna do menu lateral para empurrá-la para a direita. O ponto-chave é o breakpoint lg (≥992px), que atende exatamente ao requisito do cliente, e o uso de ms-auto para alinhar a coluna à direita dentro do grid.

O Bootstrap 5 é um framework CSS que fornece um sistema de grid responsivo baseado em flexbox. O grid é dividido em 12 colunas, e você usa classes como col-lg-9 para definir que um elemento ocupe 9 das 12 colunas a partir do breakpoint lg (large, ≥992px). Abaixo desse breakpoint, as colunas se empilham verticalmente por padrão, o que atende ao requisito de "colapsar em dispositivos móveis".

A classe navbar define um componente de navegação, e fixed-top fixa a barra no topo da viewport, fazendo com que ela permaneça visível ao rolar a página. A diferença entre fixed-top e sticky-top é sutil: fixed-top posiciona a barra de forma fixa em relação à viewport, enquanto sticky-top a mantém no fluxo do documento até que o scroll a atinja, então a fixa. Para uma barra que deve estar sempre no topo, fixed-top é a escolha adequada.

O container centraliza o conteúdo com largura máxima responsiva, enquanto container-fluid ocupa 100% da largura da viewport. Para um layout com conteúdo principal e menu lateral, o container é mais comum, pois mantém o conteúdo alinhado e legível em telas grandes.

A classe ms-auto (margin-start: auto) é uma utilitária de margem que empurra o elemento para a direita dentro de um contêiner flexbox. No grid do Bootstrap, cada col-* é um item flex, e aplicar ms-auto à coluna do menu lateral faz com que ela seja empurrada para a extremidade direita da linha, garantindo que o menu fique à direita conforme solicitado.

A pegadinha desta questão está no breakpoint: o cliente pediu que o menu lateral seja exibido à direita em dispositivos com resolução maior ou igual a 992 pixels. No Bootstrap 5, o breakpoint lg (large) é exatamente ≥992px. As alternativas que usam col-md-* (≥768px) ou col-xl-* (≥1200px) não atendem ao requisito, pois o md é menor que 992px e o xl é maior. Além disso, a alternativa que usa container-fluid não é ideal para um layout com conteúdo centralizado, e a que usa sticky-top não fixa a barra no topo da mesma forma que fixed-top.

Guarde a relação entre os breakpoints do Bootstrap e os requisitos de resolução: é exatamente nela que as alternativas se dividem.

Alternativa A — ❌ Incorreta

Usa col-md-9 e col-md-3, que ativam o layout de colunas a partir de 768px (breakpoint md), não a partir de 992px como pedido. Além disso, usa container-fluid, que ocupa toda a largura da tela, o que não é necessário para o layout descrito e não é o mais adequado para centralizar o conteúdo. A barra de navegação com navbar e fixed-top está correta, mas o breakpoint errado desqualifica a alternativa.

Alternativa B — ❌ Incorreta

Usa sticky-top em vez de fixed-top. Embora sticky-top também fixe a barra após o scroll, fixed-top é a classe mais direta para uma barra fixa no topo da viewport. Além disso, usa container-fluid, que não centraliza o conteúdo, e não inclui ms-auto para posicionar o menu à direita. O breakpoint lg está correto, mas os outros elementos estão inadequados.

Alternativa C — ✅ Correta ⟵ GABARITO

Esta alternativa combina todos os elementos corretos: navbar para a barra de navegação, fixed-top para fixá-la no topo, container para centralizar o conteúdo, row para criar a linha do grid, col-lg-9 e col-lg-3 para as colunas que se ativam a partir de 992px (breakpoint lg), e ms-auto na coluna do menu lateral para empurrá-la para a direita. Isso atende exatamente aos requisitos: barra fixa no topo, conteúdo principal e menu lateral que colapsa em dispositivos móveis (pois as colunas se empilham abaixo de 992px) e menu à direita em telas ≥992px.

Alternativa D — ❌ Incorreta

Usa col-md-8 e col-md-4, que ativam o layout de colunas a partir de 768px, não a partir de 992px. Além disso, a proporção 8/4 não é a mesma que 9/3, e o breakpoint md não atende ao requisito de resolução mínima de 992px. O ms-auto está presente, mas o breakpoint errado e a proporção diferente desqualificam a alternativa.

Alternativa E — ❌ Incorreta

Usa col-xl-9 e col-xl-3, que ativam o layout de colunas a partir de 1200px (breakpoint xl), não a partir de 992px. Isso significa que, em telas entre 992px e 1199px, as colunas ainda estariam empilhadas, não atendendo ao requisito. Além disso, usa container-fluid, que não centraliza o conteúdo. O ms-auto está presente, mas o breakpoint errado e o container inadequado desqualificam a alternativa.

Gabarito: letra C