1

hace dos días tenia este problema el cual ya pude superar, pero no del todo, ahora tengo el problema es que no lo puedo visualizar correctamente en dispositivos móviles o de manera responsiva.

Tengo el siguiente problema, necesito mostrar en una Card Horizontal de Bootstrap 4 una consulta desde base de datos para mostrar las entradas de un blog sencillo.

¿Cómo hago para imprimir la información traída desde la base de datos en Blog mediante una Card horizontal de Bootstrap? De todas maneras les comparta la url del sitio web para que puedan observar desde el inspector del navegador y poder apreciar el posible error, de antemano muchas gracias por la ayuda prestada.

Mi código es el siguiente:

<?php


$driveObjetos=new driveObjetos($myconnect);

      $tablaBlog=$driveObjetos->getContenidoPorFecha();

      if(empty($tablaBlog)){

        echo "No se encontraron entradas en el Blog!";

      }else{
        
        foreach($tablaBlog as $valor){

          echo "<div class='card mb-3 flex-center' style='max-width: 70%; margin:auto; margin-top:20px;'>";
          echo "<div class='row no-gutters'>";
          echo "<div class='col-md-4'>";
          if($valor->getImagen()!=""){

            echo "<img src='../imagenes/";

            echo $valor->getImagen() . "' class='img-fluid text-center' style='padding:20px 0px 20px 20px; width:100%;' />";

          }          
          echo "</div>";
          echo "<div class='col-md-8'>";
          echo "<div class='card-body'>";
          echo "<h4 class='card-title'>" .$valor->getTitulo() ."</h4>";
          echo "<br>";
          echo "<h6>" .$valor->getFecha() ."</h6>";
          echo "<div style='width:500px; text-align:justify'>";
          echo $valor->getComentario() ."</div>";
          echo "</div>";
          echo "</div>";
          echo "</div>";
          echo "</div>";

          }

          echo "<hr>";         

    }

    }catch(exception $e){

      die("error:" .$e->getMessage());
  
  }

?>
3
  • ¿No te muestra nada tus variables $valor->getFecha() o valor->getComentario() ?
    – Edgar Gc
    el 19 jul. 2021 a las 4:41
  • Lo que pasa es que en PC me muestra correctamente la Card o Tarjeta de Bootstrap con la información que trae desde la base de datos ahí no hay problema, cuando visualizo en móviles me muestra toda la información pero con error de visualización o sea distorsionada o desproporcionada y fuera de los contenedores o superpuesta al información el 19 jul. 2021 a las 6:49
  • Viendo tu código, no encuentro el "breakpoint responsive". Solo tienes un breakpoint cuando es en col-md, pero, en nigun lugar especificas col y row para la vista sm
    – Edgar Gc
    el 19 jul. 2021 a las 17:36

1 respuesta 1

3

No comprendo del todo tu código en PHP pero, si logro captar lo que deseas hacer, deja te propongo un ejemplo para ver si es lo que necesitas y tu lo adaptas a tu código en PHP. ¿Va?

No se que versión de bootstrap estés usando pero, trabajemos con la v5. Primero usaremos algunas card en horizontal de ejemplo.

  1. Para ello usaremos las que trae la documentación oficial en su apartado Cards Horizontal.

  2. Es armar un poco el esqueleto y quedaria de la siguiente manera:

<link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <div class="container">
      <div
        class="
          row
          row-cols-xs-1
          row-cols-sm-1
          row-cols-md-2
          row-cols-lg-3
          row-cols-xl-3
          text-center
          g-4
        "
      >
        <div class="col-sm-12 col-md-6 col-lg-12">
          <div class="card mb-3">
            <div class="row g-0">
              <div class="col-md-4">
                <img
                  src="https://via.placeholder.com/340x440/5b9bd5/FFFFFF"
                  class="img-fluid rounded-start"
                  alt="..."
                />
              </div>
              <div class="col-md-8">
                <div class="card-body">
                  <h5 class="card-title">Titulo dummie</h5>
                  <p class="card-text">Texto dummie de prueba</p>
                  <p class="card-text">
                    <small class="text-muted">Updated 3 mins ago</small>
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="col-sm-12 col-md-6 col-lg-12">
          <div class="card mb-3">
            <div class="row g-0">
              <div class="col-md-4">
                <img
                  src="https://via.placeholder.com/340x440/ffc000/FFFFFF"
                  class="img-fluid rounded-start"
                  alt="..."
                />
              </div>
              <div class="col-md-8">
                <div class="card-body">
                  <h5 class="card-title">Titulo dummie</h5>
                  <p class="card-text">Texto dummie de prueba</p>
                  <p class="card-text">
                    <small class="text-muted">Updated 3 mins ago</small>
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="col-sm-12 col-md-6 col-lg-12">
          <div class="card mb-3">
            <div class="row g-0">
              <div class="col-md-4">
                <img
                  src="https://via.placeholder.com/340x440/a5a5a5/FFFFFF"
                  class="img-fluid rounded-start"
                  alt="..."
                />
              </div>
              <div class="col-md-8">
                <div class="card-body">
                  <h5 class="card-title">Titulo dummie</h5>
                  <p class="card-text">Texto dummie de prueba</p>
                  <p class="card-text">
                    <small class="text-muted">Updated 3 mins ago</small>
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="col-sm-12 col-md-6 col-lg-12">
          <div class="card mb-3">
            <div class="row g-0">
              <div class="col-md-4">
                <img
                  src="https://via.placeholder.com/340x440/ed7d31/FFFFFF"
                  class="img-fluid rounded-start"
                  alt="..."
                />
              </div>
              <div class="col-md-8">
                <div class="card-body">
                  <h5 class="card-title">Titulo dummie</h5>
                  <p class="card-text">Texto dummie de prueba</p>
                  <p class="card-text">
                    <small class="text-muted">Updated 3 mins ago</small>
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="col-sm-12 col-md-6 col-lg-12">
          <div class="card mb-3">
            <div class="row g-0">
              <div class="col-md-4">
                <img
                  src="https://via.placeholder.com/340x440/4472c4/FFFFFF"
                  class="img-fluid rounded-start"
                  alt="..."
                />
              </div>
              <div class="col-md-8">
                <div class="card-body">
                  <h5 class="card-title">Titulo dummie</h5>
                  <p class="card-text">Texto dummie de prueba</p>
                  <p class="card-text">
                    <small class="text-muted">Updated 3 mins ago</small>
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="col-sm-12 col-md-6 col-lg-12">
          <div class="card mb-3">
            <div class="row g-0">
              <div class="col-md-4">
                <img
                  src="https://via.placeholder.com/340x440/f86f6f/FFFFFF"
                  class="img-fluid rounded-start"
                  alt="..."
                />
              </div>
              <div class="col-md-8">
                <div class="card-body">
                  <h5 class="card-title">Titulo dummie</h5>
                  <p class="card-text">Texto dummie de prueba</p>
                  <p class="card-text">
                    <small class="text-muted">Updated 3 mins ago</small>
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

  1. ¿En donde esta la magia?

Radica aquí

<div
        class="
          row
          row-cols-xs-1
          row-cols-sm-1
          row-cols-md-2
          row-cols-lg-3
          row-cols-xl-3
          text-center
          g-4
        "
      ></div>

En donde le estas diciendo que, a partir de determinado tamaño de pantalla, se necesiten n filas para mostrar las cards.

La segunda parte de la magia se encuentra acá:

 <div class="col-sm-12 col-md-6 col-lg-12"></div>

En esta parte, al igual que la anterior, se calcula el uso de las columnas dependiendo del tamaño de la grilla, es decir, si tu breakpoint es sm. Usaras todo el ancho de la pantalla, si es el tamaño de una tableta electronica (o md, ocupas la mitad de la pantalla.. Y así, hasta terminar.

Algunos links para lograr comprender esto mejor:

1
  • 1
    Muchas gracias, si eso lo tengo claro y veo que no tuve en cuenta los puntos de quiebre de cada dispositivo o resolución de pantalla, aplicare estos atributos y vere si esto me corrige el problema, muchas gracias por su aporte el 19 jul. 2021 a las 20:08

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.