0

Eu preciso colocar um layout nos resultados da pesquisa do input search, eu tenho uma página que usa o layout de Cards do bootstrap 4, e eu queria que os resultados da pesquisa ficasse do mesmo jeito. Esse é o script que uso no layout da minha outra página:

<div class="container my-3">

    <div class="row">

        <?php foreach ($dadosUN as $UN): ?>

           <div class="col-12 col-md-6 col-lg-3 mb-3 mb-md-3">

                <div class="card">

                    <div class="img-container">

                      <a href="index.php?post=<?php echo $UN['title']?>"><img src="<?php echo $UN['capa']?>" alt="<?php echo $UN['alt']?>" class="card-img-top" id="imgUNcover"></a>

                    </div>

                    <div class="card-body">

                      <a href="index.php?post=<?php echo $UN['title']?>" class="card-title cardTitleLink"><h1 class="cardTitleUN"><?php echo $UN['title']?></h1></a>

                      <p class="card-text text-muted"><?php echo $UN['text']?></p>

                      <a href="index.php?post=<?php echo $UN['title']?>" class="btn btn-outline-danger btn-sm">Continue Lendo</a>

                    </div>

                </div>

           </div>

       <?php endforeach; ?>

    </div>

</div>

Eu consegui deixar o layout da pesquisa mais ou menos parecido, usando esse script:

<div class="container my-3">

    <div class="row">

    <div class='col-12 col-md-6 col-lg-3 mb-3 mb-md-3'>  

        <?php

        if(isset($_POST['pesquisar'])&&!empty($_POST['cxnome']))
        {
        $nome=$_POST['cxnome'];
        $stmt = $conn->prepare("select * from bn_publicacao where title like :letra");
        $stmt->bindValue(':letra', '%'.$nome.'%', PDO::PARAM_STR);
        $stmt->execute();
        $resultados = $stmt->rowCount();

          if($resultados>=1){


            while($reg = $stmt->fetch(PDO::FETCH_OBJ)){

            echo "<div class='card'>";

            echo "<div class='img-container'>";

            echo "<a href='index.php?post='"; 

            echo $reg->title." ";

            echo ">";

            echo "<img src='";

            echo $reg->capa." ";

            echo "'";

            echo "alt='";

            echo $reg->alt." ";

            echo "'";

            echo "class='card-img-top'";

            echo "id='imgUNcover'";

            echo ">";

            echo "</a>";

            echo "</div>";

            echo "<div class='card-body'>";

            echo "<a href='index.php?post='"; 

            echo $reg->title." ";

            echo "class='card-title cardTitleLink'>";

            echo "<h1 class='cardTitleUN'>";

            echo $reg->title." ";

            echo "</h1>";

            echo "</a>";

            echo "<p class='card-text text-muted'>";

            echo $reg->text." ";

            echo "</p>";

            echo "<a href='index.php?post='";

            echo $reg->title." ";

            echo "class='btn btn-outline-danger btn-sm'>";

            echo "Continue Lendo";

            echo "</a>";

            }

          }else{
            echo "Não existe usuario cadastrado";
            }

          }else{
            echo "Preencha o campo de pesquisa";
          }
          ?>

          </div>

        </div>

      </div>

    </div>

</div>

Mais ficou muito bugado, o layout só funcionou perfeitamente para o primeiro resultado, os outros cards ficaram um em cima do outro, e as imagens ficaram diferentes da imagem do primeiro card:

inserir a descrição da imagem aqui

O certo seria eles ficarem um ao lado do outro, como nessa imagem:

inserir a descrição da imagem aqui

Alguém pode me ajudar?

1 Resposta 1

1

Você precisa colocar esse div dentro do while

<div class='col-12 col-md-6 col-lg-3 mb-3 mb-md-3'>

2

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .