TransWikia.com

Cards Bootstrap

Stack Overflow en español Asked by Nat Najera on August 26, 2021

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"

One Answer

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.

Correct answer by diego burlando on August 26, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP