Bienvenido a la Comunidad de Treehouse
¿Quieres colaborar en errores de código? ¿Tienes errores que necesitan comentarios? ¿Buscas un par de ojos adicionales en tu último proyecto? aquí.
¿Buscas aprender algo nuevo?
Treehouse ofrece una prueba gratuita de siete días para estudiantes nuevos. Obtén acceso a miles de horas de contenido y únete a miles de
Inicia tu prueba gratuita
zkb
Desarrollo Web Front End Graduado de Techdegree 13,636 PuntosEl elemento de tarjeta final está fuera de lugar en la cuadrícula
El código a continuación es para la sección de oradores que cubre este video. La tarjeta final es idéntica al resto, pero no se alinea correctamente en la cuadrícula. ¿Qué está pasando aquí?
<h1 class=display-4 text-center my-5 text-muted>Horario</h1>
<div class=fila>
<div class=col-md-6>
<div class=tarjeta mb-3>
<img src=img/vivianne.png class=tarjeta-img-superior alt=Vivianne>
<div class=cuerpo-tarjeta>
<h5 class=card-title>Vivianne McVue</h5>
<p class=card-text>Vivianne es una desarrolladora web y educadora apasionada por construir aplicaciones web escalables y basadas en datos, ¡especialmente las que abordan problemas antiguos con tecnología nueva!</p>
</div>
</div>
</div>
<div class=col-md-6>
<div class=tarjeta mb-3>
<img src=img/nodestradamus.png class=tarjeta-img-superior alt=NodeStradamus>
<div class=cuerpo-tarjeta>
<h5 class=card-title>NodeStradamus</h5>
<p class=card-text>"NodeStra" es un ingeniero de software y filósofo que intenta dejar el mundo mejor de lo que lo encontró. Codifica para organizaciones sin fines de lucro, comercio electrónico y aplicaciones web a gran escala.</p>
</div>
</div>
</div>
<div class=col-md-6>
<div class=tarjeta mb-3>
<img src=img/robbie.png class=tarjeta-img-superior alt=Robbie>
<div class=cuerpo-tarjeta>
<h5 class=card-title>Robbie Redux</h5>
<p class=card-text>Robbie es un desarrollador de JavaScript que trabaja en aplicaciones a gran escala. También es un educador que se esfuerza por apoyar a los estudiantes en la eliminación de barreras para aprender a programar.</p>
</div>
</div>
</div>
<div class=col-md-6>
<div class=tarjeta mb-3>
<img src=img/ecma.png class=tarjeta-img-superior alt=Ecma>
<div class=cuerpo-tarjeta>
<h5 class=card-title>Ecma Scriptnstuff</h5>
<p class=card-text>Ecma descubrió su pasión por la programación y la enseñanza hace más de 15 años. Está emocionada de presentarte todas las maravillas de JavaScript.</p>
</div>
</div>
</div>
<div class=col-md-6>
<div class=tarjeta mb-3>
<img src=img/jay.png class=tarjeta-img-superior alt=Jay>
<div class=cuerpo-tarjeta>
<h5 class=card-title>Jay Query</h5>
<p class=card-text>Jay es un desarrollador, autor de CSS: The Missing Manual, JavaScript & jQuery: The Missing Manual, y educador de desarrollo web.</p>
</div>
</div>
</div>
<div class=col-md-6>
<div class=tarjeta mb-3>
<img src=img/json.png class=tarjeta-img-superior alt=Json>
<div class=cuerpo-tarjeta>
<h5 class=card-title>Json Babel</h5>
<p class=card-text>Durante toda su vida profesional, Json ha trabajado con computadoras en línea; es un programador políglota y le gusta utilizar las herramientas adecuadas para el trabajo.</p>
</div>
</div>
</div>
</div>
2 Respuestas
Ashar Malik
7,176 puntosHola. En this publicación, alguien dijo que use la h-100 clase, que establece la altura máxima al 100%. Tenía el mismo problema, y esto funcionó para mí. Aquí está mi código:
<!-- oradores -->
<h1 class=pantalla-4 texto-centro mi-5 id=oradores>Ponentes</h1>
<div class=fila grupo-tarjeta>
<div class=col-md-6 col-lg-4 mb-4>
<div class=tarjeta h-100>
<img src=img/vivianne.png class=tarjeta-img-superior>
<div class=cuerpo-tarjeta>
<h4 class=card-title>Vivianne McVue</h4>
<p class=card-text>
Vivianne es una desarrolladora web y educadora apasionada
por crear aplicaciones web escalables e impulsadas por datos, especialmente
aquellas que abordan problemas antiguos con tecnología nueva.
</p>
</div>
</div>
</div>
<div class=col-md-6 col-lg-4 mb-4>
<div class=tarjeta h-100>
<img src=img/nodestradamus.png class=tarjeta-img-superior>
<div class=cuerpo-tarjeta>
<h4 class=card-title>NodeStradamus</h4>
<p class=card-text>
"NodeStra" es un ingeniero de software y filósofo que intenta
dejar el mundo mejor de lo que lo encontró. Programa para
organizaciones sin fines de lucro, comercio electrónico y aplicaciones web a gran escala.
</p>
</div>
</div>
</div>
<div class=col-md-6 col-lg-4 mb-4>
<div class=tarjeta h-100>
<img src=img/robbie.png class=tarjeta-img-superior>
<div class=cuerpo-tarjeta>
<h4 class=card-title>Robbie Redux</h4>
<p class=card-text>
Robbie es un desarrollador de JavaScript que trabaja en aplicaciones a gran escala.
También es un educador que se esfuerza por apoyar
a los estudiantes en la eliminación de barreras para aprender a programar.
</p>
</div>
</div>
</div>
<div class=col-md-6 col-lg-4 mb-4>
<div class=tarjeta h-100>
<img src=img/ecma.png class=tarjeta-img-superior>
<div class=cuerpo-tarjeta>
<h4 class=card-title>Ecma Scriptnstuff</h4>
<p class=card-text>
Ecma descubrió su pasión por la programación y la enseñanza hace
más de 15 años. Está emocionada de presentarte todos
los portentos de JavaScript.
</p>
</div>
</div>
</div>
<div class=col-md-6 col-lg-4 mb-4>
<div class=tarjeta h-100>
<img src=img/jay.png class=tarjeta-img-superior>
<div class=cuerpo-tarjeta>
<h4 class=card-title>Jay Query</h4>
<p class=card-text>
Jay es un desarrollador, autor de CSS: The Missing Manual,
JavaScript & jQuery: The Missing Manual, y educador de
desarrollo web.
</p>
</div>
</div>
</div>
<div class=col-md-6 col-lg-4 mb-4>
<div class=tarjeta h-100>
<img src=img/json.png class=tarjeta-img-superior>
<div class=cuerpo-tarjeta>
<h4 class=card-title>Json Babel</h4>
<p class=card-text>
Durante toda su vida profesional, Json ha trabajado con
computadoras en línea; es un programador políglota y
le gusta utilizar las herramientas adecuadas para el trabajo.
</p>
</div>
</div>
</div>
</div><!-- /speakers -->
Mark Sebeck
38,347 PuntosHola. Pegué tu código en el proyecto del espacio de trabajo del video y todo se veía bien. Incluso funcionó cuando pasé a 3 columnas agregando la clase col-lg-4 como lo hizo en el video. Me pregunto si es algo que hiciste antes si has estado programando desde el inicio. ¿Podrías adjuntar el resto de tu código o crearar captura de pantalla de tu espacio de trabajo para que otros lo solucionen?