Centrer le contenu dans la barre de navigation bootstrap réactive

221

J'ai du mal à centrer mon contenu dans la barre de navigation bootstrap. J'utilise bootstrap 3. J'ai lu de nombreux articles, mais le CSS ou les méthodes utilisées ne fonctionneront pas avec mon code! Je suis vraiment frustré, c'est donc ma dernière option. Toute aide serait appréciée!

<!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
la source

Réponses:

457

Je pense que c'est ce que vous recherchez. Vous devez retirer le float: leftde la navigation intérieure pour le centrer et en faire un bloc en ligne.

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

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

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

Modifier: si vous ne souhaitez que cet effet se produise lorsque la navigation n'est pas réduite, entourez-la dans la requête multimédia appropriée.

@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
la source
Si vous avez des problèmes d'espace supplémentaire sous les liens (si vous utilisez un arrière-plan différent pour les liens actifs par exemple), vous pouvez utiliser:.navbar .navbar-collapse { line-height: 0px; }
jenniwren
3
Je recommanderai de ne pas jouer avec bootstrap.css d'origine. Au lieu de cela, créez votre propre style.
Faizan Mubasher
Dans mon cas, j'ai dû supprimer "flex" et le remplacer par "inline-block", puis il a commencé à fonctionner.
theMayer
Est une solution parfaite.
Renato Lazaro
47

Le message d'origine demandait comment centrer la barre de navigation effondrée. Pour centrer des éléments sur la barre de navigation normale, essayez ceci:

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

.navbar-nav > li {
    display: inline-block;
    float:none;
}
Radu Rascol
la source
23

Il existe une autre façon de procéder pour les mises en page qui n'ont pas à placer la barre de navigation dans le conteneur et qui ne nécessitent aucune substitution CSS ou Bootstrap.

Placez simplement un div avec la containerclasse Bootstrap autour de la barre de navigation. Cela centrera les liens à l'intérieur de la barre de navigation:

<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 vous souhaitez ensuite aligner le contenu du corps sur la barre de navigation centrale, vous devez également placer ce contenu dans la containerbalise Bootstrap .

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

Tout le monde ne peut pas utiliser ce type de disposition (certaines personnes ont besoin d'imbriquer la barre de navigation elle-même à l'intérieur du container). Néanmoins, si vous pouvez le faire, c'est un moyen facile de centrer vos liens de barre de navigation et votre corps.

Vous pouvez voir les résultats dans cette page complète JSFiddle: http://jsfiddle.net/bdd9U/231/embedded/result/

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

Eric S. Bullington
la source
13
Hm, cette solution ne semble plus fonctionner. Votre exemple est maintenant aligné à gauche.
Bjarte Aune Olsen
n'a pas fonctionné pour moi, mais appréciez la simplicité de votre solution!
Ben Casalino
12

Ce code a fonctionné pour moi 

.navbar .navbar-nav {
    display: inline-block;
    float: none;
}
.navbar .navbar-collapse {
    text-align: center;
}
Shuhad zaman
la source
8

Pour Bootstrap 4:

Utilisez simplement

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

mx-auto fera le travail

Hezy Ziv
la source
8

Mise à jour 2020 ...

Bootstrap 4

Le centrage du contenu de Navbar est plus facile est Bootstrap 4, et vous pouvez voir de nombreux scénarios de centrage expliqués ici: https://stackoverflow.com/a/20362024/171456

Bootstrap 3

Un autre scénario qui ne semble pas avoir encore reçu de réponse est centrage à la fois la marque et des liens navbar . Voici une solution ..

.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

Voir aussi: Bootstrap NavBar avec des éléments alignés à gauche, au centre ou à droite

Zim
la source
4

sur le site officiel de bootstrap (et, presque, comme l'a dit Eric S. Bullington.

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

l'exemple de barre de navigation ressemble à:

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

pour centrer la navigation, ce que j'ai fait:

<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*/
    }
}

travaillez avec class = "container" et navbar-droite ou gauche, et bien sûr vous pouvez remplacer id par classe. :RÉ

NoZero
la source
3

Il semble que toutes ces réponses impliquent des CSS personnalisés au-dessus du bootstrap. La réponse que je fournis utilise uniquement le bootstrap, donc j'espère que cela viendra pour ceux qui veulent limiter les personnalisations.

Cela a été testé avec 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
la source
2

cela devrait fonctionner 

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

Utiliser le HTML suivant

<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>

Et 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;
}

Modifiez selon vos besoins

Alexander Gorelik
la source
1

La version V4 de BootStrap ajoute le centre (justification-centre-de-contenu) et l'alignement à droite (justification-contenu-fin) selon: 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>
Le codeur
la source
Êtes-vous sûr que cela fonctionne? J'ai essayé, mais comme mes li sont pleine largeur, cela ne fait aucune différence
gota
Salut Nuno, nous utilisons cela dans notre application, alors oui, cela fonctionne vraiment, c'est un menu horizontal en haut de notre application, toujours utilisé.
The Coder