1
resposta

A imagem não vai para a lateral com o <div class="row">

A minha imagem não lateraliza utilizando a classe "row" igual na aula... Poderiam me ajudar?

<html>
<head>
<meta charset="UTF-8" />
<link
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css"
    rel="stylesheet"
    integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl"
    crossorigin="anonymous">
<body>

    <div class="container">
        <div class="card" th:each="pedido : ${pedidos}">
            <div class="card-header" th:text="${pedido.nomeProduto}"></div>

            <div class="card-body">
                <div class="row">
                    <div class="col-6">
                        <div>
                            Valor: <span th:text="${pedido.valorNegociado}"></span>
                        </div>
                        <div>
                            Data da Entrega: <span th:text="${pedido.dataDaEntrega}"></span>
                        </div>

                        <div>Produto</div>
                        <div>
                            <input class="form-control" th:value="${pedido.urlProduto}"
                                value="Url do produto" />
                        </div>

                        <div>Descrição</div>
                        <div>
                            <textarea class="form-control" th:text="${pedido.descricao}">Descrição do pedido</textarea>
                        </div>

                        <div class="col-6">
                            <div>
                                <img th:src="${pedido.urlImagem}" src="" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
</body>
</head>
</html>
1 resposta

Oie Guilherme, tudo bem contigo?

Perdão pela demora!

Geralmente acaba sendo algum errinho de digitação, por isso compensa mais você substituir esse código por um que você sabe que está correto.

Baixei o projeto do instrutor e peguei o html dele, substitua tudo que estiver dentro da sua <div class="container"> pelo seguinte:

        <div class="container">
            <div th:replace="~{base :: titulo('Últimos Pedidos')}"></div>

            <div class="card mb-3" th:each="pedido : ${pedidos}">
                <div class="card-header alert-dark" th:text="${pedido.nomeProduto}">Nome do produto</div>

                <div class="card-body">
                    <div class="row">
                        <div class="col-12 col-sm-8  mb-3">
                            <div class="row">
                                <div class="col-md-5">Valor: <span th:if="${pedido.valorNegociado} != null" th:text="${'R$ ' + #numbers.formatDecimal(pedido.valorNegociado,3,'POINT',2,'COMMA')}">200,99</span></div>
                                <div class="col-md-7">Data da entrega: <span th:text="${#temporals.format(pedido.dataDaEntrega, 'dd/MM/yyyy')}">10/02/2020</span></div>
                            </div>

                            <div>Produto</div>
                            <div> <input class="form-control" th:value="${pedido.urlProduto}" value="url do produto"/></div>

                            <div>Descrição</div>
                            <div>
                                <textarea class="form-control" th:text="${pedido.descricao}">descrição do pedido</textarea>
                            </div>
                        </div>
                        <div class="col-12 col-sm-4">
                            <div>
                                <img class="img-thumbnail" th:src="${pedido.urlImagem}" src=""/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

Veja se agora funciona!

Se tiver qualquer problema estarei por aqui :)