Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Dúvida] erro com lista

Eu tenho uma lista deveria 3 fotos por linha. poremelas estão sendo exibidas uma abaixo da outra. Como posso corrigir isso?

<ol class="list-unstyled row">
    <li *ngFor="let photo of photos" class="col-4">
        <ap-photo
            [url]="photo.url"
            [description]="photo.description">
        </ap-photo>
    </li>
</ol>

aula em que é citado este codigo: https://cursos.alura.com.br/course/angular-fundamentos/task/38731

1 resposta
solução!

Olá, Arthur!

O código que você postou parece estar correto para o objetivo de ter 3 fotos por linha, já que cada foto está sendo colocada em uma coluna que ocupa 4 espaços de um total de 12 (col-4 no Bootstrap), o que normalmente resultaria em 3 itens por linha.

Pode ser um problema com o CSS que está afetando o layout das colunas. Aqui estão algumas coisas que você pode verificar:

  1. Classe CSS Aplicada: Certifique-se de que a classe row e col-4 do Bootstrap estão sendo corretamente aplicadas. Isso significa que você deve ter o CSS do Bootstrap incluído no seu projeto. Você pode verificar se outras partes do seu site que usam o Bootstrap estão funcionando corretamente.

  2. Estilos Customizados: Verifique se não há nenhum estilo CSS customizado que possa estar sobrescrevendo os estilos do Bootstrap. Isso pode incluir display, width, ou configurações de flex que alteram o comportamento padrão das colunas.

Confirme se a estrutura do HTML está sendo gerada como esperado no navegador. Você pode usar o Inspecionar do seu navegador para verificar se as classes estão sendo aplicadas aos elementos corretamente e se a estrutura do DOM está como você definiu no seu template Angular.

O Bootstrap ajusta o layout com base no tamanho da tela, então, se você está testando em uma tela muito pequena, as colunas podem automaticamente ajustar-se para ficar uma abaixo da outra. Tente visualizar em uma tela maior ou ajustar a janela do navegador para ver se o layout muda.

Se após estas verificações o problema persistir, você pode tentar forçar o layout usando CSS adicional, mas idealmente, o Bootstrap deveria cuidar disso sem necessidade de estilos extras.

Reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!

Sucesso

Um grande abraço e até mais!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!