2

espero me puedan ayudar, tengo un card group de 3 columnas que se muestran dinámicamente, en el index tengo el div contenedor dentro de la clase donde tiene que aparecer las cards en orden

<div class="row row-cols-1 row-cols-md-3 g-4">   <div id="prueba"></div>   </div>

en el div prueba tiene que parecer lo que estoy mostrando por ajax que tiene el contenido de las card que seria lo siguiente


<div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>

ahora lo que me aparece en pantalla cuando ejecuto todo es una sola columna y una card por fila todas pegadas sin la separación, pero agarro lo que tengo en el div y y lo paso al archivo index removiendo el div y colocando el contenido y ps me sale todo bien, no logro entender por que.

el contenido que quiero mostrar es dinámico con php, o sea muestro 9 cards y cuando llegue al final quiero que me muestre en otro div otras nueve cards y así sucesivamente por eso estoy metiendo el div dentro de de este div

<div class="row row-cols-1 row-cols-md-3 g-4">

para que me vaya mostrando las columnas que quiero a medida que necesite.

espero haber echo la pregunta de manera clara, estoy aquí atengo si necesitan alguna información adicional.

[![en esta imagen esta el resultado que me el div donde estan las cards que vendia siendo el duv que dice prueba][1]][1]

Y en esta otra imagen esta el resultado si coloco todo afuera sin llamarlo en el div que me lo hace sin problema como tiene q ser

[![aca lo hace sin problema ejecutando todo en el index][2]][2]

2
  • El problema sería que no se están posicionando bien tus cards, osea uno al lado del otro, cierto?... el 18 dic. 2022 a las 20:13
  • Correcto, voy a subir 2 fotos, una de cuando coloco la parte interna dentro del div que muestro con ajax y la otra cuando lo coloco todo en el index.php que hay si se muestra como es sin problema alguno, pero el detalle es que el contenido tiene q ser dinamico por que necesito que me muestre 8 y al llegar al final 8 mas y asi sucesivamente seria la idea el 18 dic. 2022 a las 21:55

1 respuesta 1

2

Tendrías que darle las siguientes clases a cada tarjeta, recuerda que el orden en el que las rejillas se adaptan al ancho de la pantalla es de ésta tabla:

// col-lg-3 col-sm-6

Tu código final sería el siguiente:

.center{
  padding: 20px;
  margin: 0px auto;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<section class ="center">
    <div class="row row-cols-1 row-cols-md-3 g-4">
        <div class="col-lg-3 col-sm-6">
            <div class="card h-100">
                <img src="..." class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">This is a longer card with supporting text below as a natural lead-in to
                        additional content. This content is a little bit longer.</p>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-sm-6">
            <div class="card h-100">
                <img src="..." class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">This is a longer card with supporting text below as a natural lead-in to
                        additional content. This content is a little bit longer.</p>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-sm-6">
            <div class="card h-100">
                <img src="..." class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">This is a longer card with supporting text below as a natural lead-in to
                        additional content. This content is a little bit longer.</p>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-sm-6">
            <div class="card h-100">
                <img src="..." class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">This is a longer card with supporting text below as a natural lead-in to
                        additional content. This content is a little bit longer.</p>
                </div>
            </div>
        </div>
    </div>
</section>

Puedes ver mejor los resultados en éste enlace.

4
  • Hola amigo gracias por responder pero el problema es que cuando lo coloco dentro del div que muestro con ajax ps no me muestra el resutado como es, y si lo coloco directo, es decir en vez de mostrarlo con ajax, lo coloco en el index directo ps si me muestra todo bien posicionado, montare 2 fotos de ejemplo el 18 dic. 2022 a las 21:56
  • encierra todo en un row (las tarjetas y lo que muestras con ajax), al div donde muestras con ajax dale la clase col-12 y a las demás tarjetas dejalo con las clases que te comento en mi respuesta el 18 dic. 2022 a las 22:08
  • 1
    Listo mi amigo muchas gracias ya con eso se soluciono. Ya marco como resuelta el 18 dic. 2022 a las 22:11
  • Ok amigo, me alegro que le haya funcionado, saludos! el 18 dic. 2022 a las 22:12

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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