Skip to main content
se añadieron 480 caracteres en el cuerpo
Origen Enlace

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>

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:

<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>

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>
Origen Enlace

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:

<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>