Al fin después de mucho batallar hemos hallado la solución de este contratiempo que muchos lectores de este espacio presentan. Si quieres compartir algún dato no dudes en aportar tu conocimiento.
Solución:
Así que tenemos 3 problemas aquí:
Eliminar el exceso de espacio debajo de la barra de navegación
La barra de navegación de arranque predeterminada tiene un margin-bottom: 20pxdesea anular eso de esta manera:
.navbar
margin-bottom: 0px;
Hacer jumbotron de ancho completo
La documentación de Bootstrap dice:
Para hacer el jumbotron de ancho completo y sin esquinas redondeadas, colóquelo fuera de todos los .containers y, en su lugar, agregue un .container dentro.
Así que básicamente:
...
Hacer jumbotron full hight
No estoy seguro de qué tan limpio encajará esto en su proyecto, pero puede intentar algo como:
.jumbotron
height: 100vh;
*Un dato interesante: El vh representa viewport height
Puede lograr esto usando el jumbotron justo debajo de la barra de navegación. Debe usar el jumbotron dentro de un contenedor o div, con su clase como:
El uso de ‘full-bg’ aumentará el ancho de jumbotron para ajustarse a la página. Para aumentar la altura, usé el texto dentro de la clase de contenedor o simplemente usé
Write here
Ahora, para mostrar la imagen correctamente en el jumbotron, use el tamaño de fondo como portada, personalizando el archivo css como:
.jumbotron
background-image: url(show-copy.jpg) ;
background-size: cover;
height: 100%;
width: 100%;
Espero que esto ayude 🙂
Esto debería darte un jumbotron de ancho completo y altura completa
Sección de Reseñas y Valoraciones
Si haces scroll puedes encontrar los comentarios de otros desarrolladores, tú de igual forma eres capaz insertar el tuyo si dominas el tema.
¡Haz clic para puntuar esta entrada!(Votos: 0 Promedio: 0)
Utiliza Nuestro Buscador