0

quiero separar los items de mi navbar ya que quedaron todos juntos, y no encuentro la forma, la idea es que quede así:

introducir la descripción de la imagen aquí

Me queda así :( introducir la descripción de la imagen aquí

    <nav class="navbar navbar-expand-sm">
    <div class= "container-fluid">
      <a class="navbar-brand" href="#"><img src="/img/VC-LOGO.png" alt="logo vi" width="100"></img> </a>
      <div  class="navbar-expand-sm"></div>
          <ul class="navbar-nav ml-auto">
              <li class="nav-item"><a class="nav-link" href="#"></a>Home</li>
              <li class="nav-item"><a class="nav-link" href="#"></a>Servicios</li>
              <li class="nav-item"><a class="nav-link" href="#"></a>Skills</li>
              <li class="nav-item"><a class="nav-link" href="#"></a>Experiencia</li>
              <li class="nav-item"><a class="nav-link" href="#"></a>Contacto</li>
          </ul>
      </div>
    </div>
  </nav>
2
  • Ese es todo tu código ??
    – Excorpion
    Commented el 4 ene. 2021 a las 20:56
  • ¿Y el logo dónde debe quedar?
    – user128299
    Commented el 4 ene. 2021 a las 20:59

1 respuesta 1

0

He corregido un tanto tu código. El mayor problema es la distribución que le has dado, poner texto fuera de los links (por lo que nunca entras dentro del ), y eliminar el collapse sin controlarlo.

<head>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
</head>

<body>
    <nav class="navbar navbar-expand-sm">
        <a class="navbar-brand" href="#">
            <img src="/img/VC-LOGO.png" alt="logo vi" width="100"></img>
        </a>
        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
            <div class="navbar-nav">
                <a class="nav-item nav-link text-muted" href="#">Home</a>
                <a class="nav-item nav-link text-muted" href="#">Services</a>
                <a class="nav-item nav-link text-muted" href="#">Skills</a>
                <a class="nav-item nav-link text-muted" href="#">Experiencie</a>
                <a class="nav-item nav-link text-muted" href="#">Contact</a>
            </div>
        </div>
    </nav>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
</body>

4
  • Muchas gracias :) de verdad, miil gracias. Y para moverlo a la izquierda como haría? solo quiero mover los items, no el logo
    – Vie
    Commented el 4 ene. 2021 a las 21:15
  • Tienes 2 formas, seguir usando Bootstrap, y moverlo donde quieras, o crear tu propio CSS. Recomendaria seguir usando bootstrap y acomodarlos. Pero eso debes buscarlo tu, por que ya varía del problema inicial que tenias. Podrías abrir otra pregunta, marcando esta respuesta, y (en mi caso) mañana llegaria a verla.
    – Excorpion
    Commented el 4 ene. 2021 a las 21:19
  • 1
    gracias excorpion, a voy a leer la docu :D
    – Vie
    Commented el 4 ene. 2021 a las 21:19
  • suerte compañero !!
    – Excorpion
    Commented el 4 ene. 2021 a las 21:21

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.