Saltar al contenido

Centrar el contenido en la barra de navegación de arranque sensible

Pudiera darse el caso de que encuentres alguna incompatibilidad con tu código o proyecto, recuerda probar siempre en un ambiente de testing antes añadir el código al trabajo final.

Solución:

Creo que esto es lo que estás buscando. Necesitas quitar el float: left desde el navegador interno para centrarlo y convertirlo en un bloque en línea.

.navbar .navbar-nav 
  display: inline-block;
  float: none;
  vertical-align: top;


.navbar .navbar-collapse 
  text-align: center;

http://jsfiddle.net/bdd9U/2/

Editar: si solo desea que este efecto suceda cuando la navegación no está colapsada, enciérrelo en la consulta de medios adecuada.

@media (min-width: 768px) 
    .navbar .navbar-nav 
        display: inline-block;
        float: none;
        vertical-align: top;
    

    .navbar .navbar-collapse 
        text-align: center;
    

http://jsfiddle.net/bdd9U/3/

La publicación original preguntaba cómo centrar la barra de navegación colapsada. Para centrar elementos en la barra de navegación normal, intente esto:

.navbar-nav 
    float:none;
    margin:0 auto;
    display: block;
    text-align: center;


.navbar-nav > li 
    display: inline-block;
    float:none;

Hay otra manera de hacer esto para los diseños que no tienen que colocar la barra de navegación dentro del contenedor y que no requieren anulaciones de CSS o Bootstrap.

Simplemente coloque un div con Bootstrap container clase alrededor de la barra de navegación. Esto centrará los enlaces dentro de la barra de navegación:

 

Si desea alinear el contenido del cuerpo con la barra de navegación central, también coloque ese contenido del cuerpo en Bootstrap container etiqueta.

No todos pueden usar este tipo de diseño (algunas personas necesitan anidar la barra de navegación dentro del container). No obstante, si puede hacerlo, es una manera fácil de centrar los enlaces de la barra de navegación y el cuerpo.

Puede ver los resultados en este JSFiddle de página completa: http://jsfiddle.net/bdd9U/231/embedded/result/

Fuente: http://jsfiddle.net/bdd9U/229/

Comentarios y puntuaciones

Si haces scroll puedes encontrar las críticas de otros sys admins, tú también eres capaz dejar el tuyo si dominas el tema.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *