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:
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.
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!