Centrer le contenu dans une barre navale bootstrap réactive

Question

Centrer le contenu dans une barre navale bootstrap réactive

Demandé el 13 de Septembre, 2013: Quand la question a-t-elle été
633453 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

J'ai du mal à centrer mon contenu dans la barre de navigation bootstrap. J'utilise bootstrap 3. J'ai lu de nombreux articles, mais les CSS ou les méthodes utilisées ne fonctionnent pas avec mon code ! Je suis vraiment frustré, alors c'est comme 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/

Demandé el 13 de Septembre, 2013 par Nick lK

Answer 1

5 Réponses

Answer 2

462voto

hajpoj Points 5229

Je pense que c'est ce que vous recherchez. Vous devez retirer le float: left de la nav intérieure pour la centrer et en faire un bloc inline.

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

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

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

Editar: si vous voulez que cet effet se produise uniquement lorsque le nav n'est pas replié, entourez-le dans la requête mé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/

Répondu el 13 de Septembre, 2013 par hajpoj (5229 Points )

Answer 3

51voto

Radu Rascol Points 511

Le message initial demandait comment centrer la barre de navigation réduite. Pour centrer les éléments de 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;
}

Répondu el 2 de Mars, 2016 par Radu Rascol (511 Points )

Answer 4

27voto

Eric S. Bullington Points 327

Il existe une autre façon de procéder pour les mises en page qui ne nécessite pas de placer la barre de navigation à l'intérieur du conteneur, et qui ne requiert aucune surcharge CSS ou Bootstrap.

Il suffit de placer un div avec le Bootstrap container autour de la barre de navigation. Cela permettra de centrer 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 aligner le contenu du corps de l'article sur la barre de navigation centrale, vous devez également placer ce contenu dans le fichier Bootstrap container étiquette.

<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 de l'élément container ). Néanmoins, si vous pouvez le faire, c'est un moyen facile de centrer les liens de votre barre de navigation et votre corps.

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

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

Répondu el 25 de Octobre, 2014 par Eric S. Bullington (327 Points )

Answer 5

16voto

Hezy Ziv Points 107

Pour Bootstrap 4 :

Il suffit d'utiliser

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

mx-auto fera l'affaire

Répondu el 12 de Février, 2019 par Hezy Ziv (107 Points )

Answer 6

12voto

Shuhad zaman Points 2300

Ce code a fonctionné pour moi

.navbar .navbar-nav {
    display: inline-block;
    float: none;
}
.navbar .navbar-collapse {
    text-align: center;
}

Répondu el 6 de Avril, 2016 par Shuhad zaman (2300 Points )

Centrer le contenu dans une barre navale bootstrap réactive

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Centrer le contenu dans une barre navale bootstrap réactive

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: