0

Una imagen vale más que mil palabras. Estoy haciendo un CV web con HTML, CSS, Bootstrap y JQuery. El caso que el menú (Get to know more about me) al ponerlo en responsive me desaparece, no sé por qué. Me mantiene la funcionalidad, eso sí, pero me desaparece. No tengo ni idea de por qué ocurre esto. ¿Alguna idea? Por otro lado, como podéis observar, al ponerlo en responsive, las cartas no aparecen centradas sino que se ajustan a la izquierda. He probado a centrarlas con margin: 0 auto pero no me funciona y realmente no comprendo por qué hace eso, ya que en otras pantallas que tengo acordeón si que me lo ajusta a toda la pantalla.

introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

Dejo por aquí el código del menú en cuestión:

          <div class="collapse navbar-collapse" id="navbarSupportedContent">
                            <ul class="navbar-nav mr-auto">
                            <li class="nav-item active">
                                <a class="nav-link" href="index.html">HOME <span class="sr-only">(current)</span></a>
                            </li>
                            <li class="nav-item dropdown">
                                <a class="nav-link dropdown-toggle" href="index.html" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                GET TO KNOW MORE ABOUT ME
                                </a>
                                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                                    <a class="dropdown-item" href="html/about-me.html">ABOUT ME</a>
                                    <a class="dropdown-item" href="html/technologies.html">TECHNOLOGIES</a>
                                    <a class="dropdown-item" href="html/soft-skills.html">SOFT SKILLS</a>
                                    <a class="dropdown-item" href="html/languages.html">LANGUAGES</a>
                                    <a class="dropdown-item" href="html/values.html">VALUES</a>
                                    <a class="dropdown-item" href="html/behavioral-questions.html">BEHAVIORAL QUESTIONS</a>
                                    <a class="dropdown-item" href="html/academic-background.html">ACADEMIC BACKGROUND</a>
                                    <a class="dropdown-item" href="html/professional-experience.html">PROFESSIONAL EXPERIENCE</a>
                                    <a class="dropdown-item" href="html/entrepreneurship-experience.html">ENTREPRENEURSHIP EXPERIENCE</a>
                                    <a class="dropdown-item" href="html/faq.html">FAQ</a>

                                
                                </div>  
                            </ul>
                        </div>


Y dejo también el código de algunas cartas:

<div class="row title">
            <ul class="nav justify-content-center">
              <li class="nav-item">
                <a class="nav-link active link-title" href="#">TECHNOLOGIES</a>
              </li>
            </ul>
        </div>

        <div class="row col-4-xl col-4-lg col-4-sm col-12">

            <div>
                <div class="card card-tech card-left" style="width: 350px;">
                    <img src="../img/html5-blue.png" class="card-img-top non-expand" alt="HTML5 Logo">
                    <div class="card-body">
                        <h5 class="card-title">HTML</h5>
                        <p class="card-text">Advanced level.</p>
                        <p class="card-text">Professional experience: 2 months.</p>
                        <div class="progress">
                            <div class="progress-bar bg-info progress-bar-striped" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
                            </div>
                        </div>
                    </div>
                </div>
            </div>


¿Alguna idea de cómo puedo solucionar ambos problemas? Gracias.

introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

3
  • 1
    ¿Podrías adjuntar un ejemplo mínimo verificable?
    – padaleiana
    Commented el 22 dic. 2020 a las 11:35
  • 1
    Ya le he puesto código. Muchas gracias. Commented el 22 dic. 2020 a las 11:47
  • 1
    Tienes el navbar collapse, pero no veo el botón de este mismo. Quieres mantener el botón o no ?
    – Excorpion
    Commented el 22 dic. 2020 a las 11:52

1 respuesta 1

2

Has abierto un elemento li pero no lo has cerrado.

Observa en tu código la parte que dice <li class="nav-item dropdown">.

Eso te está descuadrando el código, y por eso no se comporta como debería. Y también por eso se te descuadran el resto de elementos como dices.

Además, deberías tener en cuenta que ya se ha lanzado Bootstrap 5 y los atributos data llevan un -bs-. Si estás creando algo nuevo deberías usar la versión 5 de Bootstrap, ya que viene con grandes ventajas.

Código arreglado:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
      
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
     <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
           <a class="nav-link" href="index.html">HOME <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item dropdown">
           <a class="nav-link dropdown-toggle" href="index.html" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
           GET TO KNOW MORE ABOUT ME
           </a>
           <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="html/about-me.html">ABOUT ME</a>
              <a class="dropdown-item" href="html/technologies.html">TECHNOLOGIES</a>
              <a class="dropdown-item" href="html/soft-skills.html">SOFT SKILLS</a>
              <a class="dropdown-item" href="html/languages.html">LANGUAGES</a>
              <a class="dropdown-item" href="html/values.html">VALUES</a>
              <a class="dropdown-item" href="html/behavioral-questions.html">BEHAVIORAL QUESTIONS</a>
              <a class="dropdown-item" href="html/academic-background.html">ACADEMIC BACKGROUND</a>
              <a class="dropdown-item" href="html/professional-experience.html">PROFESSIONAL EXPERIENCE</a>
              <a class="dropdown-item" href="html/entrepreneurship-experience.html">ENTREPRENEURSHIP EXPERIENCE</a>
              <a class="dropdown-item" href="html/faq.html">FAQ</a>
           </div>
        </li>
     </ul>
  </div>
  
</nav>
8
  • Lo he probado y sigue desapareciendo el menú al ponerlo en responsive. Commented el 22 dic. 2020 a las 11:57
  • 1
    @SergioGordillo Voy a echarle un ojo bien y te actualizo el código Commented el 22 dic. 2020 a las 12:04
  • @SergioGordillo Te he actualizado eso. Faltaba el contenedor con clase .navbar-expand-xx que es para saber en qué breakpoint tu nav ocupa el ancho completo. De todas formas échale un ojo a BS5 porque ya que estás aprendiendo que sea algo nuevo! Commented el 22 dic. 2020 a las 12:09
  • Muchas gracias, lo del menú ya está solucionado. Por cierto, para que las cartas se alineen en el centro (la segunda pregunta)... ¿qué puedo hacer? Muchas gracias. Commented el 22 dic. 2020 a las 17:42
  • @SergioGordillo De nada máquina, me alegro que te sirva. Dale a aceptar respuesta en el icono del check si te ha servido. Para el tema de centrar los elementos, BS ofrece la clase justify-content-center, tendrás que añadirla al contenedor padre. Commented el 22 dic. 2020 a las 18:59

Tu Respuesta

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

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