0

Quiero mostrar lo que son unas recetas en la pagina y me gusto la manera de usar las cards pero al momento de implementarla algunos textos se quedan fuera, no se porque pasa esto, alguien tiene una idea? Imagen con el error

Aquí les dejo la imagen de como el texto sale, por debajo y no quiero que pase eso, necesito que todas las cards queden dentro del fondo blanco.

<section id="main-content">
      <section class="wrapper site-min-height">
        <div class="row mt">
          <div class="col-lg-12">
            <div class="row content-panel">
              <div class="col-md-12 centered">
                <br>
                <h2><i class="fas fa-running"></i> Resetas saludables</h2>
                <br>
                <p><strong>Para poder alcanzar tus meta es muy importante incorporar una actividad física en tu rutina.
                    Recomendamos hacer 30 minutos de ejercicio, 3 a 5 días por semana.</strong></p>
              </div>
              <!-- /col-md-6 -->
            </div>
            <!-- /row -->
          </div>
          <!-- /col-lg-12 -->
          <div class="col-lg-12 mt text-center">
            <div class="row">
              <div class="card-deck">
                <div class="card col-md-4">
                  <img class="card-img-top" src="img/plato.jpg" alt="Card image cap">
                  <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 class="card col-md-4">
                  <img class="card-img-top" src="img/plato.jpg" alt="Card image cap">
                  <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
                  </div>
                </div>
                <div class="card col-md-4">
                  <img class="card-img-top" src="img/plato.jpg" alt="Card image cap">
                  <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
                  </div>
                </div>
              </div>
            </div>
            <!-- /col-lg-12 -->
          </div>
          <!-- /row -->
        </div>
      </section>
      <!-- /wrapper -->
    </section>

Y bueno aquí les dejo el código que utilizo.

4
  • En primer lugar, el código que subes muestra elementos tipo col huérfanos. En la documentación de la grilla de Bootstrap se establece lo siguiente: Las filas (rows) son el envoltorio para las columnas (cols)..., En un diseño de grilla, el contenido va dentro de las columnas(cols) y sólo las columnas (cols) pueden ser elementos hijo inmediatos de las filas (row). Entonces, tus elementos iniciales col-lg-12 están huérfanos y tu elemento card-deck está en un lugar no apropiado entre una fila y sus columnas. Saludos el 17 ago. 2020 a las 17:44
  • Acabo de modificar el codigo que muestro para mostrar la seccion completa, estara mal? el 17 ago. 2020 a las 17:58
  • Probé el código que publicaste y el texto se ve bien, no sobresale de las cards, seguramente tiene algún css aplicado
    – Erica T.
    el 17 ago. 2020 a las 19:46
  • Si al final cambie el tamaño en el css y me funciono bien el 18 ago. 2020 a las 20:03

0

Tu Respuesta

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

Examina otras preguntas con la etiqueta o formula tu propia pregunta.