entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

1voto

navbars de bootstrap inline

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> 

2 Respuestas

0voto

Leonardo-Tadei Puntos219750

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!

africanus1989 comentado Ene 26

Hola Leonardo, creo que ya salio la version final de bootstrap 4, y sobre el problma, usted tenia razon, habia un problema con el enlace, no se que era, pero lo solucione utilizando el cdn. Muchas gracias por la ayuda!!

Peter comentado Ene 26

@africanus1989 si es la solución, por favor selecciona la respuesta como correcta.

Saludos.

0voto

Leonardo-Tadei Puntos219750

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

Por favor, accede o regístrate para responder a esta pregunta.

¿Conoces alguien que puede responder?
¡Comparte esta pregunta!


Otras Preguntas y Respuestas


Actividad Reciente

...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta