Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Ao colocar o container-fluid o grid da pau

Boa tarde pessoal !

Ao colocar o class fluid no container o meu grid dar pau, fica aparecendo 4 card em linha. segue o código para verificar

<section class="container-fluid bg-light" id="receitas">
                    <div class="row justify-content-center">

                        <article class="card borda-cor-especial card-largura p-0 m-4 col-12 col-md-4">
                            <img src="img/receita-1.jpg" class="card-img-top card-posicao-imagem" alt="Risotto de Queijo">
                            <div class="card-body">
                                <h5 class="card-title">Risotto de Queijo</h5>
                                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
                                    content.</p>
                                <a href="#" class="btn botao-cor-especial">Veja a receita</a>
                            </div>
                        </article>

                        <article class="card borda-cor-especial card-largura p-0 m-4 col-12 col-md-4">
                            <img src="img/receita-2.jpg" class="card-img-top card-posicao-imagem" alt="Frango Grelhado">
                            <div class="card-body">
                                <h5 class="card-title">Frango Grelhado</h5>
                                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
                                    content.</p>
                                <a href="#" class="btn botao-cor-especial">Veja a receita</a>
                            </div>
                        </article>

                        <article class="card borda-cor-especial card-largura p-0 m-4 col-12 col-md-4">
                            <img src="img/receita-3.jpg" class="card-img-top card-posicao-imagem" alt="Molho de Tomate com Queijo">
                            <div class="card-body">
                                <h5 class="card-title">Molho de Tomate com Queijo</h5>
                                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
                                    content.</p>
                                <a href="#" class="btn botao-cor-especial">Veja a receita</a>
                            </div>
                        </article>

                        <article class="card borda-cor-especial card-largura p-0 m-4 col-12 col-md-4">
                            <img src="img/receita-4.jpg" class="card-img-top card-posicao-imagem" alt="Massa Simples">
                            <div class="card-body">
                                <h5 class="card-title">Massa Simples</h5>
                                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
                                    content.</p>
                                <a href="#" class="btn botao-cor-especial">Veja a receita</a>
                            </div>
                        </article>

                        <article class="card borda-cor-especial card-largura p-0 m-4 col-12 col-md-4">
                            <img src="img/receita-5.jpg" class="card-img-top card-posicao-imagem" alt="Peixe Marinado">
                            <div class="card-body">
                                <h5 class="card-title">Peixe Marinado</h5>
                                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
                                    content.</p>
                                <a href="#" class="btn botao-cor-especial">Veja a receita</a>
                            </div>
                        </article>

                        <article class="card borda-cor-especial card-largura p-0 m-4 col-12 col-md-4">
                            <img src="img/receita-6.jpg" class="card-img-top card-posicao-imagem" alt="Torta de Maçã">
                            <div class="card-body">
                                <h5 class="card-title">Torta de Maçã</h5>
                                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
                                    content.</p>
                                <a href="#" class="btn botao-cor-especial">Veja a receita</a>
                            </div>
                        </article>
                    </div>
                </section>
            </main>
4 respostas
solução!

Fala ai Renato, tudo bem? Talvez você precise separar os grids por linha, ou seja, hoje você tem apenas um row para vários card.

Normalmente cada row tem apenas 12 colunas.

Sem o container-fluid quantos cards aparecem por linha? 3?

Espero ter ajudado.

Fala meu amigo, tudo bem !

Cara, não consegui entender a sua explicação sobre dividir as row, teria como me dar exemplos ? Estou fazendo igual ao treinamento, a única coisa que fiz de diferente foi trocar as imagens pois não encontrei o material então eu adaptei.

Matheus, dando uma olhada nas perguntas do fórum verifiquei que um colega teve a mesma dúvida que eu e encontrei você dando a solução. Vou deixar aqui o link para a postagem https://cursos.alura.com.br/forum/topico-container-fluid-quebra-a-pagina-101357

Mais uma vez obrigado ! =)

Fala Renato, muito bom, acabou que não deu tempo de responder antes.

Fico feliz que tenha resolvido o problema, obrigado por compartilhar a solução.

Abraços e bons estudos.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software