Questão de Tecnologia da Informação - Programação — FGV DPE-RS 2023 (nº 56)

O conceito-chave do Grid System do Bootstrap é a divisão do espaço em 12 colunas virtuais. Para organizar o conteúdo, sempre começamos com um container div com a classe row, e dentro dele, colocamos os itens que serão as colunas, usando classes col- seguidas de um breakpoint (como md para médio, sm para pequeno, etc.) e o número de colunas que o item deve ocupar.

A resposta correta segue esse princípio:

• <div class="row">: Define a linha que conterá as colunas.
• <div class="col-md-3 col-6">: Para cada um dos 4 itens:
  • col-md-3: Em telas médias (md) e maiores, cada item ocupará 3 das 12 colunas. Como há 4 itens, $4 \times 3 = 12$, preenchendo a linha com 4 colunas iguais.
  • col-6: Em telas menores (extra-pequenas e pequenas, pois col-6 se aplica por padrão e é herdado por sm se não houver col-sm-*), cada item ocupará 6 das 12 colunas. Assim, os dois primeiros itens ($2 \times 6 = 12$) ocuparão a primeira linha, e os dois seguintes ($2 \times 6 = 12$) quebrarão para a segunda linha, formando 2 linhas e 2 colunas.

O distrator mais tentador pode ser a alternativa que usa col-md-4 col-2. Ela está incorreta porque:

• col-md-4: Se cada um dos 4 itens ocupasse 4 colunas, o total seria $4 \times 4 = 16$ colunas. Como o grid tem apenas 12, o quarto item seria automaticamente quebrado para uma nova linha, resultando em 3 colunas na primeira linha e 1 na segunda, e não 4 colunas em uma única linha.
• col-2: Se cada item ocupasse 2 colunas em telas menores, os 4 itens ocupariam $4 \times 2 = 8$ colunas, todos na mesma linha e deixando espaço vazio, e não 2 linhas com 2 colunas.

Para fixar o conceito e evitar armadilhas, lembre-se sempre da grade de 12 colunas do Bootstrap. A soma dos números das classes col-* para os itens em uma linha deve ser 12 para que eles preencham o espaço desejado. Use os breakpoints (sm, md, lg, xl) para definir o comportamento em diferentes tamanhos de tela, sempre do menor para o maior, e o col- sem prefixo para o comportamento padrão (extra-pequeno).