Solucionado
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
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!