Questão FC373551
Considere o fragmento de código abaixo, em uma página que utiliza Bootstrap em condições ideais. <div class="container-fluid"> <div class="row"> <div class="col-sm-3 col-md-6 col-l
Desenvolvimento Web
FCC · 2019
Considere o fragmento de código abaixo, em uma página que utiliza Bootstrap em condições ideais.
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-6 col-lg-4 col-xl-2">
<p>A</p>
</div>
<div class="col-sm-9 col-md-6 col-lg-8 col-xl-10">
<p>B</p>
</div>
</div>
</div>
Esse fragmento resultará na divisão da largura da tela entre os dois contêineres na proporção de
- 20% / 80% em dispositivos de tela grande.
- 20% / 40% / 30% / 10% em todos os tipos de dispositivos.
- 60% / 40% em dispositivos de tela média.
- 25% / 75% em dispositivos de tela pequena.
- 33% / 66% em dispositivos de tela extragrande.
Mostrar resposta e comentário
Gabarito
D
Comentário do professor
O fragmento usa o sistema de grade do Bootstrap, que divide a linha em 12 colunas.
As classes col-sm-3 e col-sm-9 valem a partir do ponto de corte sm (telas pequenas).
Para calcular a proporção, basta dividir o número de colunas pelo total 12:
para o primeiro contêiner \(3/12 = 0{,}25 = 25\%\).
Para o segundo contêiner: \(9/12 = 0{,}75 = 75\%\).
Portanto, em dispositivos de tela pequena a largura se dividirá em 25% / 75%, conforme indicado pela classe col-sm aplicada a cada coluna.
Conteúdo do catálogo FC Concursos · Atualizado em