Quise agregar las tarjetas de bootstrap a mi página, al inicio se veían bien:
Pero después cuando empecé a agregar un texto abajo lo empezó a tapar:
No intenté ninguna forma de solucionarlo porque realmente no tengo idea, no sé mucho de programación y realmente me trabé con esto. Intenté buscar soluciones pero no encontré nada (o al menos que yo lograra entender).
PD: No sé si es importante aclararlo, pero no tapa el texto que se encuentra arriba, solo el de abajo de las tarjetas.
* {
box-sizing: border-box;
}
body {
padding: 80px 20px 0;
}
/*NAV*/
.header-nav {
background-color: #8b008b;
height: 60px;
position: fixed;
width: 100%;
top: 0;
left: 0;
}
.nav {
display: flex;
justify-content: space-evenly;
max-width: 992px;
margin: 0 auto;
}
.nav-link {
color: white;
text-decoration: none;
}
.nav-link:hover {
background-color: #9F309F;
color: white;
transition: 0.5s;
}
.nav-menu,
.nav-socialmedia,
.nav-home {
display: flex;
list-style-type: none;
margin: 0px 0px;
padding: 0px;
}
.nav-menu-item {
font-size: 16;
margin: 0 0px;
line-height: 2.7;
text-transform: initial;
padding: 0px 0px;
width: max-content;
}
.nav-socialmedia-item {
margin: 0 8px;
line-height: 55px;
}
.contact-button {
margin: 15px;
padding: 20x 1px;
display: flex;
height: 30px;
background-color: #8b008b;
color: white;
border-color: #9F309F;
border-style: double;
}
.contact-button:hover {
background-color: #9F309F;
transition: 0.5s
}
.nav-toggle {
color: white;
background: none;
border: none;
height: 30px;
font-size: 20px;
padding: 0px 20px;
line-height: 60px;
}
.logo {
font-style: italic;
}
.nav-item {
display: none;
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<header class="header-nav">
<nav class="nav">
<div class="container-fluid"></div>
<ul class="nav-home">
<button class="nav-toggle">
<i class="fa-solid fa-bars"></i>
</button>
<li class="nav-menu-item">
<a href="" class="nav-link logo"><img src="Images/nav_inicio/argentina-programa-logo.png" alt="" style="width: 90px;"></a>
</li>
</ul>
<ul class="nav-menu">
<li class="nav-menu-item"><a href="" class="nav-link">Sobre mí</a></li>
<li class="nav-item nav-menu-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Descubre más</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Experiencia</a></li>
<li><a class="dropdown-item" href="#">Educación</a></li>
<li><a class="dropdown-item" href="#">Skills</a></li>
<li><a class="dropdown-item" href="#">Proyectos</a></li>
</ul>
</li>
<li class="nav-menu-item"><a href="" class="nav-link nav-item-media">Educación</a></li>
<li class="nav-menu-item"><a href="" class="nav-link nav-item-media">Skills</a></li>
<li class="nav-menu-item"><a href="" class="nav-link nav-item-media">Proyectos</a></li>
<button type="button" class="contact-button">Contacto</button>
</ul>
</nav>
</nav>
</header>
<section class="section-educacion">
<h1>Formación académica</h1>
<div class="container text-center">
<div class="row">
<div class="col">
<div class="card" style="width: 18rem;">
<img src="Images/otros/Argentina Programa Logo.png" class="card-img-top" alt="Logo de Argentina Programa">
<div class="card-body">
<h5 class="card-title">Argentina Programa (2022)</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Más información</a>
</div>
</div>
<br>
<div class="card" style="width: 18rem;">
<img src="Images/otros/mdn_logo.jpg" class="card-img-top" alt="Logo de MDN Web Docs">
<div class="card-body">
<h5 class="card-title">MDN Web Docs (2022)</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Más información</a>
</div>
</div>
</div>
</section>
<>
) para crear un ejemplo mínimo verificable en la pregunta misma. Si lo haces, no olvides agregar el enlace al CDN de bootstrap pulsando en agregar librería externa, situado a la izquierda de la pantalla.position:fixed
de esa clase, y agregar en su lugar la clase "fixed-top" al nav, que de por sí es una clase de Bootstrap? El nav quedaría algo así como<nav class="nav fixed-top header-nav">
. Por cierto, cuidado con las etiquetas sin cerrar, noté al menos un par de ellas así.