Pular para o conteúdo principal

Questão de Programação — Web — FGV 2023

ProgramaçãoWeb
Código
fg063738
Banca
FGV
Órgão
DPE-RS
Ano
2023
Nível
Médio
Cargo
Técnico - Apoio Especializado - Programador
Uma grande preocupação nos sistemas atuais é a responsividade, devido à grande diversidade de dispositivos com acesso à Internet e disponibilidade de navegadores Web. Uma técnica para garantir a responsividade é a organização do conteúdo em colunas oferecida pelo Bootstrap.Considerando uma página que oferece a divisão do espaço em 4 colunas para telas médias, enquanto dispositivos com telas menores devem apresentar 2 linhas e 2 colunas, a configuração deve ser:
  1. A<div class="row"><div class="col-md-3 col-6">1</div><div class="col-md-3 col-6">2</div><div class="col-md-3 col-6">3</div><div class="col-md-3 col-6">4</div></div>
  2. B<div class="row-lg-4 row-sm-2"><div class="col">1</div><div class="col">2</div><div class="col">3</div><div class="col">4</div></div>
  3. C<div class="row"><div class="col-md-4 col-2">1</div><div class="col-md-4 col-2">2</div><div class="col-md-4 col-2">3</div><div class="col-md-4 col-2">4</div></div>
  4. D<div class="col-lg-4 col-sm-2"><div class="row">1</div><div class="row">2</div><div class="row">3</div><div class="row">4</div></div>
  5. Ediv class="col"><div class="row-3 row-sm-6">1</div><div class="row-3 row-sm-6">2</div><div class="row-3 row-sm-6">3</div><div class="row-3 row-sm-6">4</div></div>
Revelar gabarito e comentário

GabaritoA — <div class="row"> <div class="col-md-3 col-6">1</div> <div class="col-md-3 col-6">2</div> <div class="col-md-3 col-6">3</div> <div class="col-md-3 col-6">4</div> </div>

Comentário gerado por IA. É um apoio ao estudo, ancorado em fontes, mas pode conter imprecisões — confira sempre na fonte oficial (lei, súmula, edital e gabarito da banca). Encontrou um erro? Use “Reportar”.

Bootstrap Grid Responsivo

Gabarito: letra A. A alternativa A utiliza corretamente classes do Bootstrap: col-md-3 para 4 colunas em telas médias (12/3=4) e col-6 para 2 colunas em telas pequenas (12/6=2), resultando em duas linhas de duas colunas. As demais alternativas empregam classes inexistentes ou valores incorretos no grid de 12 colunas.

Alternativa A — ✅ Correta ⟵ GABARITO

A estrutura <div class="row"> com quatro divs internas de classe col-md-3 col-6 atende perfeitamente: em telas médias (≥768px) cada coluna ocupa 3 unidades (4 colunas); em telas menores (<768px) cada coluna ocupa 6 unidades, dispondo-se em 2 colunas por linha (2 linhas no total).

Alternativa B — ❌ Incorreta

Utiliza row-lg-4 row-sm-2, classes que não existem no Bootstrap. O sistema de grid não possui classes row-* para largura; o correto é aplicar col-* nas colunas filhas.

Alternativa C — ❌ Incorreta

Emprega col-md-4 (que no grid de 12 resultaria em 3 colunas, não 4) e col-2 (que em telas pequenas produziria 6 colunas, não 2). Os valores estão trocados: deveria ser col-md-3 e col-6.

Alternativa D — ❌ Incorreta

A estrutura está invertida: uma div col-lg-4 col-sm-2 envolve divs com classe row, o que não faz sentido. A classe col deve ser aplicada às colunas internas, e row à div pai.

Alternativa E — ❌ Incorreta

Usa row-3 row-sm-6, classes que não existem. Além disso, a div externa está sem a classe row e as classes row-* não controlam largura em Bootstrap.

PEGA ESSA DICA!

No Bootstrap, o grid é sempre composto por uma div row que contém divs col-*. O número após o breakpoint indica quantas unidades (de 12) a coluna ocupará. Para 4 colunas iguais, use col-md-3; para 2 colunas, use col-6. Memorize a relação: 12 / número de colunas = valor da classe.

Link permanente: /questoes/fg063738