twitter bootstrap - template - Cómo justificar navbar-nav en Bootstrap 3

navbar bootstrap template

Question

navbar justificar una navbar (hacer que el contenido de la barra de navegación sea elástico) en Bootstrap 3. Agregué margin: 0 auto; max-width: 1000px; margin: 0 auto; max-width: 1000px; a las clases de nav* , y también intentó agregar un elemento de container como primario al ul . Como último control, hice lo que se sugirió en esta respuesta al agregar navbar-justified a la clase navbar , pero esto hizo que todo se desplazara hacia la izquierda sin justificar toda la barra de navegación.

Hacer un nav nav-justified ul hace que el centro de la navbar-nav , pero no conserva los estilos de la clase navbar-nav ya que no es parte de la ul , y no se ve muy bien cuando la pantalla es más pequeña que 768px.

¿Cómo justifico una navbar de navbar Bootstrap 3?

Editar: para aquellos que estén interesados ​​en una respuesta más completa, aquí hay un código que uso en producción:

// Stylesheet
.navbar-nav>li {
  float: none;
}

// Navbar
<nav class="navbar navbar-default">
  <ul class="nav nav-justified navbar-nav">
    <li><a href="/">Home</a></li>
    <li><a href="group.html">Group</a></li>
    <li><a href="services.html">Services</a></li>
    <li><a href="positions.html">Positions</a></li>
  </ul>
</nav>

Y aquí está un jsFiddle de trabajo . Es posible que deba estirar el tamaño del cuadro de result para que se muestre correctamente. Si está interesado en centrar la lista real sin que la navegación se extienda hasta el ancho completo, consulte jsFiddle de David Taiaroa .

Answer 1

Aquí hay una solución más fácil. simplemente elimine la clase "navbar-nav" y agregue "nav-justified".

Answer 2

Hola, puedes usar este código a continuación para trabajar con navegación justificada

<div class="navbar navbar-inverse">
    <ul class="navbar-nav nav nav-justified">
        <li class="active"><a href="#">Inicio</a></li>
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li><a href="#">Item 3</a></li>
        <li><a href="#">Item 4</a></li>
    </ul>
 </div>

Answer 3

Para justificar que el menú de navegación 3 navbar-nav justifique el ancho del 100%, puede usar este código:

@media (min-width: 768px){
    .navbar-nav {
        margin: 0 auto;
        display: table;
        table-layout: auto;
        float: none;
        width: 100%;
    }
    .navbar-nav>li {
        display: table-cell;
        float: none;
        text-align: center;
    }
} 

Answer 4

Puede justificar los contenidos de la barra de navegación utilizando:

@media (min-width: 768px){
  .navbar-nav{
     margin: 0 auto;
     display: table;
     table-layout: fixed;
     float: none;
  }
}  

Vea este en vivo: http://jsfiddle.net/panchroma/2fntE/

¡Buena suerte!

Answer 5

Resulta que hay un float: left propiedad float: left por defecto en todos los elementos navbar-nav>li , que es la razón por la que todos estaban scrunching a la izquierda. Una vez que agregué el código a continuación, hizo que la navbar centrara y no se comprimiera.

.navbar-nav>li {
        float: none;
}

Espero que esto ayude a alguien más que está buscando centrar una navbar .

Answer 6

Sé que esta es una publicación anterior, pero me gustaría compartir mi solución. Pasé varias horas intentando hacer un menú de navegación justificado. Realmente no necesitas modificar nada en bootstrap css. Solo necesita agregar la clase correcta en el html.

   <nav class="nav navbar-default navbar-fixed-top">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapsable-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#top">Brand Name</a>
        </div>
        <div class="collapse navbar-collapse" id="collapsable-1">
            <ul class="nav nav-justified">
                <li><a href="#about-me">About Me</a></li>
                <li><a href="#skills">Skills</a></li>
                <li><a href="#projects">Projects</a></li>
                <li><a href="#contact-me">Contact Me</a></li>
            </ul>
        </div>
    </nav>

Este código CSS simplemente eliminará la clase de marca navbar cuando la pantalla llegue a 768px.

media@(min-width: 768px){
   .navbar-brand{
        display: none;
    }
}

Answer 7

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
 <div class="container">
<div class="navbar-header">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
</div>
<div class="collapse navbar-collapse">
  <ul class="nav navbar-nav">
    <li><a href="#">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#contact">Contact</a></li>  
  </ul>
</div>

y para el css

@media ( min-width: 768px ) { 
    .navbar > .container {
        text-align: center;
    }
    .navbar-header,.navbar-brand,.navbar .navbar-nav,.navbar .navbar-nav > li {
        float: none;
        display: inline-block;
    }
    .collapse.navbar-collapse {
        width: auto;
        clear: none;
    }
}

verlo en vivo http://www.bootply.com/103172