Questão nº 56
Questão de Desenvolvimento de Sistemas · FGV DPE-RS 2023 (nº 56)
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:
- 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> (alternativa correta) - 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> - 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> - 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> - E<div 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>
Resposta comentada
Gabarito Alternativa A
O conceito-chave é que o Bootstrap divide a tela em 12 colunas invisíveis. Você usa classes como col-md-3 para dizer "em telas médias (md), esta div ocupa 3 das 12 colunas" (ou seja, 1/4 da largura). Para telas menores, usamos col-6 (6 de 12 = 1/2), fazendo com que 2 itens caibam por linha, gerando 2 linhas de 2 colunas.
- (A) Correta: Usa
col-md-3(4 colunas em telas médias) ecol-6(2 colunas em telas pequenas), exatamente o que o enunciado pede. - (B) Incorreta: Não existem classes
row-lg-4ourow-sm-2no Bootstrap; a classerownão recebe modificadores de tamanho. - (C) Incorreta:
col-md-4daria 3 colunas (12/4) ecol-2daria 6 colunas em telas pequenas, não 2 linhas e 2 colunas. - (D) Incorreta: A estrutura está invertida:
coldeve ser filha derow, não o contrário; além disso,col-lg-4ecol-sm-2não criam o layout pedido. - (E) Incorreta: Usa
row-3erow-sm-6, classes que não existem no Bootstrap; a hierarquia decolerowtambém está errada.
Fonte: FGV DPE-RS 2023 Técnico - Apoio Especializado (Programador) (Caderno Tipo 1). Reproduzida para fins de estudo.