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

221

Tengo problemas para centrar mi contenido en la barra de navegación de bootstrap. Estoy usando Bootstrap 3. ¡He leído muchas publicaciones, pero el CSS o los métodos utilizados no funcionarán con mi código! Estoy realmente frustrado, así que esta es mi última opción. ¡Cualquier ayuda sería apreciada!

<!DOCTYPE html>
<html>
  <head>
    <title>Navigation</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="css/style.css" rel="stylesheet" media="screen">
  </head>
  <body>
    <div class="container">
      <nav class="navbar navbar-default" role="navigation">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-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>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse navbar-ex1-collapse">
          <ul class="nav navbar-nav">
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </nav>
      <h1>Home</h1>

   </div>
     <!--JAVASCRIPT-->
   <script src="js/jquery-1.10.2.min.js"></script>
   <script src="js/bootstrap.min.js"></script>
 </body>
</html>

https://jsfiddle.net/amk07fb3/

css  twitter-bootstrap  navbar 
— Nick lK
fuente

Respuestas:

457

Creo que esto es lo que estás buscando. Debe eliminar el float: leftnavegador 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 el navegador no esté colapsado, envuélvalo 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/

— hajpoj
fuente
Si tiene problemas con el espacio adicional debajo de los enlaces (si está usando un fondo diferente para enlaces activos, por ejemplo) puede usar:.navbar .navbar-collapse { line-height: 0px; }
— jenniwren
3
Recomendaré no jugar con bootstrap.css original. En cambio, crea tu propio estilo.
— Faizan Mubasher
En mi caso, tuve que eliminar "flex" y reemplazarlo por "inline-block", luego comenzó a funcionar.
— theMayer
Es una solución perfecta
— Renato Lazaro
47

La publicación original preguntaba cómo centrar la barra de navegación contraída. 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;
}
— Radu Rascol
fuente
23

Hay otra forma de hacer esto para los diseños que no tienen que poner la barra de navegación dentro del contenedor, y que no requiere ninguna anulación de CSS o Bootstrap.

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

<nav class="navbar navbar-default">
  <!-- here's where you put the container tag -->
  <div class="container">

    <div class="navbar-header">
    <!-- header and collapsed icon here -->
    </div>

    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
      <!-- links here -->
      </ul>
    </div>
  </div> <!-- close the container tag -->
</nav> <!-- close the nav tag -->

Si desea alinear el contenido del cuerpo con la barra de navegación central, también debe colocar el contenido del cuerpo en la containeretiqueta Bootstrap .

<div class="container">
  <! -- body content here -->
</div>

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

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

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

— Eric S. Bullington
fuente
13
Hm, esta solución ya no parece funcionar. Su ejemplo queda alineado ahora.
— Bjarte Aune Olsen
¡No funcionó para mí, pero aprecio la simplicidad de su solución!
— Ben Casalino
12

Este código me funcionó 

.navbar .navbar-nav {
    display: inline-block;
    float: none;
}
.navbar .navbar-collapse {
    text-align: center;
}
— Shuhad Zaman
fuente
8

Para Bootstrap 4:

Solo usa

<ul class="navbar-nav mx-auto">

mx-auto hará el trabajo

— Hezy Ziv
fuente
8

Actualización 2020 ...

Bootstrap 4

Centrar el contenido de la barra de navegación es más fácil es Bootstrap 4, y puede ver muchos escenarios de centrado explicados aquí: https://stackoverflow.com/a/20362024/171456

Bootstrap 3

Otro escenario que aún no parece haber sido respondido es centrar tanto la marca como los enlaces de la barra de navegación . Aquí hay una solución ...

.navbar .navbar-header,
.navbar-collapse {
    float:none;
    display:inline-block;
    vertical-align: top;
}

@media (max-width: 768px) {
    .navbar-collapse  {
        display: block;
    }
}

http://codeply.com/go/1lrdvNH9GI

Ver también: Bootstrap NavBar con elementos alineados a la izquierda, centro o derecha

— Zim
fuente
4

del sitio oficial de bootstrap (y, casi, como dijo Eric S. Bullington.

https://getbootstrap.com/components/#navbar-default

el ejemplo de la barra de navegación se ve así:

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
        ...etc

para centrar la navegación, que lo que he hecho:

<div class="container-fluid" id="nav_center">

css:

@media (min-width:768px) { /* don't break navbar on small screen */
    #nav_center {
        width: 700px /* need to found your width according to your entry*/
    }
}

trabaje con class = "container" y navbar-right o left, y por supuesto puede reemplazar id por class. :RE

— NoZero
fuente
3

Parece que todas estas respuestas implican CSS personalizado además de bootstrap. La respuesta que proporciono utiliza solo bootstrap, así que espero que sea útil para aquellos que desean limitar las personalizaciones.

Esto fue probado con Bootstrap V3.3.7

<footer class="navbar-default navbar-fixed-bottom">
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-offset-5 col-xs-2 text-center">
                <p>I am centered text<p>
            </div>
            <div class="col-xs-5"></div>
        </div>
    </div>
</footer>
— Tommy May
fuente
2

Esto debería funcionar 

 .navbar-nav {
    position: absolute;
    left: 50%;
    transform: translatex(-50%);
}
— Govan
fuente
1

Use el siguiente html

<link rel="stylesheet" href="app/components/directives/navBar/navBar.scss"/>
<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <!-- Collect the nav links, forms, and other content for toggling -->
            <ul class="nav navbar-nav">
                <li><h5><a href="#/">Home</a></h5></li>
                <li>|</li>
                <li><h5><a href="#products">About</a></h5></li>
                <li>|</li>
                <li><h5><a href="#">Contacts</a></h5></li>
                <li>|</li>
                <li><h5><a href="#cart">Cart</a></h5></li>
            </ul>
    </div><!-- /.container-fluid -->
</nav>

Y css

.navbar-nav {
  width: 100%;
  text-align: center;
}
.navbar-nav > li {
  float: none;
  display: inline-block;
}
.navbar-default {
  background-color: white;
  border-color: white;
}
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus{
  background-color:white;
}

Modifique de acuerdo a sus necesidades.

— Alexander Gorelik
fuente
1

V4 de BootStrap está agregando Center (justify-content-center) y Right Alignment (justify-content-end) según: https://v4-alpha.getbootstrap.com/components/navs/#horizontal-alignment

<ul class="nav justify-content-center">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>
— El codificador
fuente
¿Estás seguro de que esto funciona? Lo intenté, pero dado que mis li's son de ancho completo, esto no hace ninguna diferencia
— gota
Hola Nuno, estamos usando esto en nuestra aplicación, así que sí, definitivamente funciona, es un menú horizontal en la parte superior de nuestra aplicación, todavía en uso.
— The Coder
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.