0

Quise agregar las tarjetas de bootstrap a mi página, al inicio se veían bien:

Imagen de mi página aparentemente funcionando bien

Pero después cuando empecé a agregar un texto abajo lo empezó a tapar:

introducir la descripción de la imagen aquí

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>

6
  • ¿Podrías agregar en las etiquetas qué versión de Bootstrap estás utilizando? Además, es posible convertir tu código a snippet (con el botón que indica <>) 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.
    – padaleiana
    el 6 sep. 2022 a las 15:13
  • @padaleiana Gracias por la ayuda, intenté hacerlo lo mejor que pude. Sé que me quedó medio extraño. Pero se puede notar como el texto "Formación académica" pasa por debajo de la barra de navegación (lo que quiero que pase) pero la tarjeta pasa por arriba. el 6 sep. 2022 a las 16:05
  • El tema de que tape el texto lo pude solucionar. Solo tenía que agrandar la sección con height en css. Ahora solo falta que no tape el nav. el 6 sep. 2022 a las 16:08
  • Pregunto: ¿es necesario que tengas al nav dentro de un header? ¿Por qué no mover la clase "header-nav" al nav, eliminar 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í.
    – padaleiana
    el 6 sep. 2022 a las 18:08
  • @padaleiana Acabo de aplicar lo que me dijsite y me funcionó. Como recién estoy empezando no me di cuenta de qué estaba mal, realmente me ayudaste mucho. Gracias. el 8 sep. 2022 a las 23:24

1 respuesta 1

1

Como mencionaba en los comentarios, no es necesario colocar al nav dentro de un header en este caso. Además de esto, podrían aplicarse los siguientes cambios:

  • Remover la propiedad position:fixed de la clase header-nav,
  • agregar, en reemplazo de la propiedad removida, la clase fixed-top al nav (clase propia de Bootstrap), y
  • mover la clase header-nav al nav.

Así, quedaría de esta manera:

* {
  box-sizing: border-box;
}

body {
  padding: 80px 20px 0;
}


/*NAV*/

.header-nav {
  background-color: #8b008b;
  height: 60px;
  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" />

<nav class="nav fixed-top header-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>
<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>
    </div>
  </div>
</section>

1
  • Por cierto, la barra de navegación se ve bien tanto en jsfiddle.net como en codepen.io. Por algún motivo no se lo visualiza correctamente como snippet (los enlace del nav "flotan", esto se ve también en la pregunta).
    – padaleiana
    el 9 sep. 2022 a las 11:19

Tu Respuesta

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

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.