FC ConcursosFC Concursos

Questão FC373553

Considere o fragmento de uma página web abaixo, desenvolvido com Bootstrap4, onde todas as bibliotecas necessárias foram importadas no cabeçalho da página. <div class="container-fl

Desenvolvimento Web

FCC · 2019

Considere o fragmento de uma página web abaixo, desenvolvido com Bootstrap4, onde todas as bibliotecas necessárias foram importadas no cabeçalho da página.

 

     <div class="container-fluid">

        <div class="row">

           <div class="col-sm-4" style="background-color:red;">Fornecimento de água</div>

           <div class="col-sm-8" style="background-color:blue;">Tratamento de esgoto</div>

         </div>

      </div>

 

Quando a janela (tela) tiver

  1. menos de 576 pixels de largura, as colunas serão empilhadas automaticamente uma sobre a outra.
  2. mais de 460 pixels de altura, as colunas aparecerão automaticamente uma sobre a outra.
  3. mais de 380 pixels de largura, as colunas aparecerão automaticamente uma ao lado da outra.
  4. menos de 768 pixels de largura, as colunas aparecerão automaticamente uma sobre a outra.
  5. mais de 800 pixels de largura, as colunas serão automaticamente colocadas uma sobre a outra.
Mostrar resposta e comentário

Gabarito

A

Comentário do professor

No Bootstrap 4, a classe .container-fluid cria um contêiner de largura total e o sistema de grid usa breakpoints para definir quando as colunas ficam lado a lado. A notação col-sm- significa que aquela divisão passa a valer a partir de 576px de largura da viewport.

No trecho, há col-sm-4 e col-sm-8, totalizando \(4+8=12\), ou seja, proporções de \(4/12=1/3\) e \(8/12=2/3\) quando a tela for >= 576px.

Quando a janela tiver menos de 576 pixels, as classes col-sm- não se aplicam e cada col passa a ocupar 100% da largura, ficando empilhadas uma sobre a outra.

Em resumo: >= 576px → colunas em linha com proporções 1/3 e 2/3; < 576px → colunas empilhadas ocupando largura total.

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

Continue aprendendo