Question

Hola gente, llevo dos dias tratando de averiguar por que los li de las navbar de boostrap no me salen inline, sino como listas, y yo no he tocado los archivos de bootstrap, incluso siempre copio y pego el codigo y aun asi siempre me sale como lista, que creen que sea?

<nav class="navbar navbar-default">
         <div class="container-fluid">
            <div class="navbar-header">
              <a class="navbar-brand" href="#">WebSiteName</a>
            </div>
                   <ul class="nav navbar-nav">
                     <li class="active"><a href="#">Home</a></li>
                     <li><a href="#">Page 1</a></li>
                     <li><a href="#">Page 2</a></li>
                     <li><a href="#">Page 3</a></li>
                   </ul>
          </div>
        </nav> 

Comments

hola, dejo aqui el link con los archivos.
https://drive.google.com/file/d/1caKdVZo4Q4SNn3v5sv1AwbDqQWQhx7Qr/view?usp=sharing

Answer 1

Hola @africanus1989,

viendo tu código, estás usando los estilos de Bootstrap 3, pero estás usando Bootstrap 4.

Para Boostrap 4, el menú se define así:

<nav class="navbar navbar-light navbar-toggleable-md bd-navbar">
  <a class="navbar-brand" href="#">WebSiteName</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Page 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Page 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Page 3</a>
      </li>
    </ul>
  </div>
</nav>

En lo personal, yo no usaría Boostrap 4, porque al ser una versión alfa, le cambiarán algunas cosas y otras fallarán, porque es un trabajo en progreso... pero si usás la versión 4, estate seguro de usar las clases y la semántica de esa versión para que todo funcione.

Saludos cordiales!

Answer 2

Hola @africanus1989,

el código HTML luce bien... fijate que estés cargando el CSS y el JS de Botstrap.

Si no es eso, editá tu pregunta y poné el código completo del HTML para ver si no tiene otra cosa, o subilo a algún lugar para que podamos verlo.

Saludos cordiales