css - personalizar - Modificar la barra de navegación bootstrap de twitter

menu de opciones bootstrap

Question

He estado tratando de modificar la barra de navegación del bootstrap de twitter, en este momento todos los enlaces están alineados a la izquierda, cuando lo que realmente me gustaría es tenerlos centralizados.

En una publicación diferente leí que usas esto

.tabs, .pills {
  margin: 0 auto;
  padding: 0;
  width: 100px;
}

Pero esto no funcionó para mí

¿Qué necesito cambiar en el CSS para que esto suceda, entiendo que puse el css modificado en el bootstrap y las anulaciones?

Cualquier ayuda apreciada

este es mi markup

diseños / aplicación

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container-fluid">
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      </a>

    <a class="brand">Newbridges</a>  

  <% if user_signed_in? %>
    <div class="nav-collapse">
      <ul class="nav ">
      <%= render "shared/navbarlogin" %>
    </div>

    <% else%>
    <div class="nav-collapse">
      <ul class="nav">

      <%= render "shared/navbar" %>
    </div>
    <% end %>

También intenté esto

.nav > li {
  float: none;
  display: inline-block;
  *display: inline;
  /* ie7 fix */
  zoom: 1;
  /* hasLayout ie7 trigger */
}
.nav {
  text-align: center;
}

Answer 1

Ah, y también, si desea espacios en ambos lados (antes de "Nombre del proyecto" y después de "Desplegable") para que sean simétricos, agregue lo siguiente:

.navbar .nav, .navbar .nav > ul
{
    float: right
}

Además, parece que el uso de lo siguiente (a partir de Bootstrap v2.0.4) no centra todavía la barra de navegación:

<div class="navbar navbar-fixed-top center">
      <div class="navbar-inner">
        <div class="container-fluid">
        .
        .
        .
        </div>
      </div>
</div>

Debes cambiar a

<div class="navbar navbar-fixed-top center">
      <div class="navbar-inner">
        <div class="container">
        .
        .
        .
        </div>
      </div>
</div>

(Extraído de la muestra provista por Andrés llich, solo que se perdió el cambio)

Ahora funciona para mí ...

Answer 2

El CSS centrado desde arriba funciona bien solo en barras de navegación sin colapsar.

Sin embargo, no es ideal cuando la barra de navegación está colapsada. De forma predeterminada, cada elemento de la barra de navegación colapsado está en su propia fila, como un menú desplegable. Pero el CSS anterior trata de empujar todos los elementos colapsados ​​en la misma fila, que es menos que ideal.

Utilicé esta pequeña solución para envolver el css de centrado en una consulta de medios, por lo que solo se desencadena en barras de navegación sin colapsar:

@media (min-width: 768px) {
    .center.navbar .nav,
    .center.navbar .nav > li {
        float:none;
        display:inline-block;
        *display:inline; /* ie7 fix */
        *zoom:1; /* hasLayout ie7 trigger */
        vertical-align: top;
    }
    .center .navbar-inner {
        text-align:center;
    }
}

(probado con bootstrap 3.1.1)

Answer 3

Puede centrar su menú de navegación configurando los elementos del menú para display:inline-block en display:inline-block lugar de float:left así:

.navbar .nav,
.navbar .nav > li {
    float:none;
    display:inline-block;
    *display:inline; /* ie7 fix */
    *zoom:1; /* hasLayout ie7 trigger */
    vertical-align: top;
}

 .navbar-inner {
    text-align:center;
}

Aunque te sugiero que crees tu propia clase para enfocarte en el menú de la barra de navegación que deseas centrar, de esta forma no molestarás los valores predeterminados de la rutina de arranque y te meterás con otras secciones de navegación que puedas tener en tu página. Puedes hacerlo así:

^{Observe la clase .center en el contenedor de la barra de navegación}

<div class="navbar navbar-fixed-top center">
     <div class="navbar-inner">
        ....
     </div>
</div>

Y luego puedes apuntar a la clase .center así:

.center.navbar .nav,
.center.navbar .nav > li {
    float:none;
    display:inline-block;
    *display:inline; /* ie7 fix */
    *zoom:1; /* hasLayout ie7 trigger */
    vertical-align: top;
}

.center .navbar-inner {
    text-align:center;
}

Demostración: http://jsfiddle.net/C7LWm/show/

Editar : Olvidaste realinear los elementos del submenú a la izquierda, esta es la solución:

CSS

.center .dropdown-menu {
    text-align: left;
}

Demostración: http://jsfiddle.net/C7LWm/1/show/

Answer 4

Sé que esta es una publicación anterior, pero también he notado esta publicación varias veces en Google. Quiero establecer la grabación directamente para centrar la barra de navegación en Twitter bootstrap ya que el método aceptado actualmente no está mal, pero no es necesario ya que twitter bootstrap lo admite.

En realidad, hay una forma mejor de hacerlo y luego modificarlo manualmente. Esto reducirá el código al usar lo que ya está en twitter bootstrap.

<div class="navbar navbar-fixed-top navbar-inverse">
    <div class="navbar-inner">
        <div class="container">
            <a class="brand" href="#">RIZEN</a>
            <ul class="nav">
                <li class="active"><a href="/">Home</a></li>
                <li><a href="#">Events</a></li>
                <li><a href="#">Links</a></li>
                <li><a href="#">Gallery</a></li>
                <li><a href="#">Contact</a></li>
                <li><a href="#">Forums</a></li>
            </ul>
        </div>
    </div>
</div>

Descompostura
La primera línea es bastante simple ya que estamos creando la barra de navegación, fijándola en una posición fija en la ventana gráfica hacia la parte superior y luego cambiando el blanco al negro invirtiendo el tema del color.

A continuación vamos a asignar la barra de navegación interna, que más o menos dice, si es posible, establecer una altura mínima y de ahí provienen los estilos de color reales, no la línea de arriba.

Aquí está la línea IMPORTANTE ya que estamos eliminando el diseño fluido para la barra de navegación y yendo solo con un contenedor. Esto establece un fijo con márgenes que centran el contenido interno en la pantalla. Esto se hace teniendo márgenes automáticos y estableciendo un ancho.

Este método hará lo que usted desee, ya que realmente guardará kb en las solicitudes de encabezado al no agregar código adicional y usar el andamio correctamente con Twitter bootstrap y no tener un exceso de código adicional. He usado este método en mis propios proyectos y continúo usándolo en mi proyecto actual. El riesgo al modificar TBS (twitter bootstrap) es que pierdes la consistencia del código y si en el futuro quieres cambiar las cosas, debes tomar nota mental de lo que has cambiado, de lo contrario las cosas podrían no funcionar como se esperaba.

Espero que esto ayude. Además, si desea un ejemplo de trabajo, simplemente mire la página principal de twitter bootstrap, ya que tiene precisamente eso.