0

En este código trato de poner una lista de cards que sean responsive (cuando la resolución sea md o superior muestre 3 cartas, cuando sea sm muestre 2), al lado de estas cartas tengo que poner un "espacio publicitario" pero no logro hacer que queden a la derecha de las cartas. No entiendo muy bien si es un problema de anidación de rows o es que algún atributo funciona diferente a como yo esperaba.

<div class="container">
        <h1>Portal de películas</h1><hr>
        <div class="row col-md-8 col-sm-10 row-cols-md-3 row-cols-sm-2">
                <div class="card">
                    <img class="card-img-top" src="Imágenes/avengers.jpg" alt="AvengersEndgame">
                    <div class="card-body">
                        <h5 class="card-title">Avengers: Endgame</h5>
                        <p class="card-text">Abril 22, 2019</p>
                    </div>
                    <div class="card-footer">
                        <small class="text-muted">Actualizado hace 3 minutos</small>
                    </div>
                </div>
                <div class="card">
                    <img class="card-img-top" src="Imágenes/elcamino.jpg" alt="ElCamino">
                    <div class="card-body">
                        <h5 class="card-title">El Camino: A Breaking Bad Movie</h5>
                        <p class="card-text">Octubre 11, 2019</p>
                    </div>
                    <div class="card-footer">
                        <small class="text-muted">Actualizado hace 3 minutos</small>
                    </div>
                </div>
                <div class="card">
                    <img class="card-img-top" src="Imágenes/godzillakong.jpg" alt="GodzillaKong">
                    <div class="card-body">
                        <h5 class="card-title">Godzilla VS Kong</h5>
                        <p class="card-text">Marzo 25, 2021</p>
                    </div>
                    <div class="card-footer">
                        <small class="text-muted">Actualizado hace 3 minutos</small>
                    </div>
                </div>
                <div class="card">
                    <img class="card-img-top" src="Imágenes/joker.jpg" alt="Joker">
                    <div class="card-body">
                        <h5 class="card-title">Joker</h5>
                        <p class="card-text">Octubre 2, 2019</p>
                    </div>
                    <div class="card-footer">
                        <small class="text-muted">Actualizado hace 3 minutos</small>
                    </div>
                </div>
        </div>
        <div class="col-md-4 col-sm-2 row-cols-md-1">
            <img class="img-fluid" src="Imágenes/publicidad1.jpg" alt="Publicidad1">
            <img class="img-fluid" src="Imágenes/publicidad2.jpg" alt="Publicidad2">
        </div>
2
  • ¿Que versión de Bootstrap estás usando? Commented el 9 abr. 2021 a las 13:43
  • 5 beta 3 (latest).
    – Mauro
    Commented el 9 abr. 2021 a las 13:46

2 respuestas 2

0

te falta un div .row para contener los dos md-8 y md-4

<div class="container">
  <h1>Portal de películas</h1><hr>
  <div class="row">
    <div class="row col-md-8 col-sm-10 row-cols-md-3 row-cols-sm-2">
      <div class="card">
          <img class="card-img-top" src="Imágenes/avengers.jpg" alt="AvengersEndgame">
          <div class="card-body">
              <h5 class="card-title">Avengers: Endgame</h5>
              <p class="card-text">Abril 22, 2019</p>
          </div>
          <div class="card-footer">
              <small class="text-muted">Actualizado hace 3 minutos</small>
          </div>
      </div>
      <div class="card">
          <img class="card-img-top" src="Imágenes/elcamino.jpg" alt="ElCamino">
          <div class="card-body">
              <h5 class="card-title">El Camino: A Breaking Bad Movie</h5>
              <p class="card-text">Octubre 11, 2019</p>
          </div>
          <div class="card-footer">
              <small class="text-muted">Actualizado hace 3 minutos</small>
          </div>
      </div>
      <div class="card">
          <img class="card-img-top" src="Imágenes/godzillakong.jpg" alt="GodzillaKong">
          <div class="card-body">
              <h5 class="card-title">Godzilla VS Kong</h5>
              <p class="card-text">Marzo 25, 2021</p>
          </div>
          <div class="card-footer">
              <small class="text-muted">Actualizado hace 3 minutos</small>
          </div>
      </div>
      <div class="card">
          <img class="card-img-top" src="Imágenes/joker.jpg" alt="Joker">
          <div class="card-body">
              <h5 class="card-title">Joker</h5>
              <p class="card-text">Octubre 2, 2019</p>
          </div>
          <div class="card-footer">
              <small class="text-muted">Actualizado hace 3 minutos</small>
          </div>
      </div>
    </div>
    <div class="col-md-4 col-sm-2 row-cols-md-1">
        <img class="img-fluid" src="Imágenes/publicidad1.jpg" alt="Publicidad1">
        <img class="img-fluid" src="Imágenes/publicidad2.jpg" alt="Publicidad2">
    </div>
  </div>
</div>

Espero ayudarte con esto, cualquier cosa me comentas, suerte!

2
  • El resultado funciona, pero cuando lo aplico a mi código original sigue el problema, ¿Será que el problema radica en cómo esta codificado antes? Tengo una barra de navegación al principio en donde está indicado el div=class "container".
    – Mauro
    Commented el 9 abr. 2021 a las 14:16
  • fíjate que yo le agregue el cierre de </div> del container puede ser que integraste todo mi código y ese </div> de cierre de mas rompa tu codificación
    – Roy
    Commented el 9 abr. 2021 a las 14:41
0

¿Algo así? Solo especifiqué que estuviese a la derecha y agregué un card columns igual usando la beta 3 de Bootstrap 5, espero te sirva.

<!DOCTYPE html>
<html lang="es">
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <!-- Bootstrap CSS -->
      <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
      <title>Ejemplo</title>
   </head>
   <body>
      <div class="container">
         <h1>Portal de películas</h1>
         <hr>
         <!--AGREGAMOS EL FLOAT-END PARA ESPECIFICARLE QUE LO QUEREMOS A LA DERECHA-->
         <div class="col-md-4 col-sm-2 row-cols-md-1 float-end">
            <!--AGREGUÉ EL CARD COLUMNS, DE ESTA FORMA MANTENEMOS EN UNA COLUMNA AMBOS ANUNCIOS-->
            <div class="card columns">
               <div class="card">
                  <img src="https://mdbcdn.b-cdn.net/img/new/standard/nature/111.jpg" class="card-img-top" alt="Publicidad1">
               </div>
               <div class="card">
                  <img src="https://mdbcdn.b-cdn.net/img/new/standard/nature/111.jpg" class="card-img-top" alt="Publicidad2">
               </div>
            </div>
         </div>
         <div class="row col-md-8 col-sm-10 row-cols-md-3 row-cols-sm-2">
            <div class="card">
               <img class="card-img-top" src="https://mdbcdn.b-cdn.net/img/new/standard/nature/111.jpg" alt="AvengersEndgame">
               <div class="card-body">
                  <h5 class="card-title">Avengers: Endgame</h5>
                  <p class="card-text">Abril 22, 2019</p>
               </div>
               <div class="card-footer">
                  <small class="text-muted">Actualizado hace 3 minutos</small>
               </div>
            </div>
            <div class="card">
               <img class="card-img-top" src="https://mdbcdn.b-cdn.net/img/new/standard/nature/111.jpg" alt="ElCamino">
               <div class="card-body">
                  <h5 class="card-title">El Camino: A Breaking Bad Movie</h5>
                  <p class="card-text">Octubre 11, 2019</p>
               </div>
               <div class="card-footer">
                  <small class="text-muted">Actualizado hace 3 minutos</small>
               </div>
            </div>
            <div class="card">
               <img class="card-img-top" src="https://mdbcdn.b-cdn.net/img/new/standard/nature/111.jpg" alt="GodzillaKong">
               <div class="card-body">
                  <h5 class="card-title">Godzilla VS Kong</h5>
                  <p class="card-text">Marzo 25, 2021</p>
               </div>
               <div class="card-footer">
                  <small class="text-muted">Actualizado hace 3 minutos</small>
               </div>
            </div>
            <div class="card">
               <img class="card-img-top" src="https://mdbcdn.b-cdn.net/img/new/standard/nature/111.jpg" alt="Joker">
               <div class="card-body">
                  <h5 class="card-title">Joker</h5>
                  <p class="card-text">Octubre 2, 2019</p>
               </div>
               <div class="card-footer">
                  <small class="text-muted">Actualizado hace 3 minutos</small>
               </div>
            </div>
         </div>
      </div>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
   </body>
</html>

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.