2

Estoy trabajando con tarjeta de Bootstrap y php del cual obtengo mediante un query los datos que deberían mostrarse en cada una de las tarjetas, por lo que efectúo un while para agregar todas las tarjetas en una sola variables y posteriormente regresarlas, el código es el siguiente:

while ($resultados = $articles->fetch(PDO::FETCH_ASSOC)) {
        $contenido .= '
            <div class="card">
                <img src="..." class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">Titulo</h5>
                    <p class="card-text">Descripcion</p>
                    <p class="card-text">Costo</p>
                    <p class="card-text"><small class="text-muted">Status con Color</small></p>
                </div>
            </div>';
    }

El problema que tengo radica en como se muestran ya que no llegan a un breakpoint, digamos que quiero mostrar máximo 4 tarjetas por renglón, pero el resultado es que a mayor numero de tarjetas mejor tamaño tiene estas ya que se empiezan a "apretar" dado que no las coloca en el siguiente párrafo. ¿Alguna idea de como solucionar esto?

El código donde están contenidas las tarjetas es:

<div class="col-sm-9">
            <span class="subtitle">
                <div class="container-fluid">
                    <div class="card-deck">
                        <?php echo ArticleController::GetProducts($category, $CurrentCategory->id); ?>
                    </div>
                </div>
            </span>
        </div>

Lo anterior esta dentro de un div.class="row" y tiene un div lateral con la clase div.class="col-sm-3"

1
  • acabo de tratar estableciendo min-width: 10rem y me muestra ahora solo cuatro registros por fila, pero no tiene un espacio verticalmente.
    – Nat Najera
    Commented el 17 jul. 2020 a las 23:43

1 respuesta 1

1

PHP Acá he agregado un container que envuelva la card de boostrap.

while ($resultados = $articles->fetch(PDO::FETCH_ASSOC)) {
        $contenido .= '
            <div class="col-md-4 col-sm-12">
                <div class="card">
                    <img src="..." class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">Titulo</h5>
                        <p class="card-text">Descripcion</p>
                        <p class="card-text">Costo</p>
                        <p class="card-text"><small class="text-muted">Status con Color</small></p>
                    </div>
                </div>
            </div>';
    }

HTML Acá he agregado un div con la clase .row para que el container sea flex

<div class="col-sm-9">
    <span class="subtitle">
        <div class="container-fluid">
            <div class="card-deck">
                <div class="row">
                    <?php echo ArticleController::GetProducts($category, $CurrentCategory->id); ?>
                </div>
            </div>
        </div>
    </span>
</div>

Espero pueda solucionar tu problema.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.