FC ConcursosFC Concursos

Questão FC373556

Considere o fragmento de código Boostrap a seguir. <div class="container-fluid"> <div class="row"> <div class="col-sm-3 col-md-6 col-lg-4" style="background-color:yellow;">Texto 1<

Desenvolvimento Web

FCC · 2018

Considere o fragmento de código Boostrap a seguir. 

 

<div class="container-fluid">

   <div class="row">

     <div class="col-sm-3 col-md-6 col-lg-4" style="background-color:yellow;">Texto 1</div>

     <div class="col-sm-9 col-md-6 col-lg-8" style="background-color:blue;">Texto 2</div>

   </div>

</div> 

 

Quando a página que contém o fragmento de código acima for executada em condições ideais, o navegador vai renderizar os dois contêineres, um ao lado do outro, na proporção aproximada de  

  1. 15%/85% para dispositivos de telas pequenas, 50%/50% para dispositivos de telas médias e 23%/76% para dispositivos de telas grandes.
  2. 25%/75% para dispositivos de telas pequenas, 50%/50% para dispositivos de telas médias e 33%/66% para dispositivos de telas grandes.
  3. 50%/50% para dispositivos de telas grandes, 25%/75% para dispositivos de telas médias e 30%/70% para dispositivos de telas pequenas.
  4. 25%/75% para dispositivos de telas grandes, 50%/50% para dispositivos de telas médias e 33%/66% para dispositivos de telas pequenas.
  5. 10%/90% para dispositivos de telas pequenas, 20%/80% para dispositivos de telas médias e 30%/70% para dispositivos de telas grandes.
Mostrar resposta e comentário

Gabarito

B

Comentário do professor

Bootstrap usa um grid de 12 colunas. Cada classe col-{breakpoint}-{n} define largura igual a \(n/12\) do contêiner disponível. Assim a proporção entre duas colunas é obtida dividindo seus valores por 12.

Para telas pequenas (sm): col-sm-3 e col-sm-9 correspondem a \(3/12=25\%\) e \(9/12=75\%\).

Para telas médias (md): ambas as colunas usam col-md-6, portanto cada uma ocupa \(6/12=50\%\), resultando em 50%/50%.

Para telas grandes (lg): col-lg-4 e col-lg-8 representam \(4/12\approx33{,}33\%\) e \(8/12\approx66{,}67\%\).

Observação: Esses valores são aproximados e válidos quando as colunas estão na mesma linha e não há espaçamentos/padding extras que alterem visualmente as proporções.

Conteúdo do catálogo FC Concursos · Atualizado em

Continue aprendendo