Maison > interface Web > Tutoriel d'amorçage > le corps du texte

Comment centrer la barre de navigation bootstrap

(*-*)浩
Libérer: 2019-07-17 10:31:27
original
6522 Les gens l'ont consulté

Quand j'ai utilisé Bootstrap pour m'entraîner à imiter un site Web aujourd'hui, j'ai trouvé que le menu dans la barre de navigation du site cible était centré, mais Bootstrap ne semble pas avoir de style centré pour le menu de navigation. Cela m'a pris beaucoup de temps. du temps et de nombreux tests pour enfin trouver une solution.

Comment centrer la barre de navigation bootstrap

La première méthode : ajoutez les styles suivants à div et ul : (apprentissage recommandé : Tutoriel vidéo Bootstrap )

<div class="navbar-collapse collapse" style="text-align: center;">
  <ul class="nav navbar-nav" style="display: inline-block;float: none;">
    <li class="">
        <a href="#">首页</a>
    </li>
    <li class="">
        <a href="#">加入我们</a>
    </li>
    <li class="">
        <a href="#">联系我们</a>
    </li>
  </ul>
</div>
Copier après la connexion

La deuxième méthode :

<div class="navbar-collapse collapse">
  <ul class="nav navbar-nav">
    <li class="">
        <a href="#">首页</a>
    </li>
    <li class="">
        <a href="#">加入我们</a>
    </li>
    <li class="">
        <a href="#">联系我们</a>
    </li>
  </ul>
</div>
Copier après la connexion

Ajoutez le style suivant :

.navbar-nav {
  float: none;
  text-align:center;
}
ul.nav.navbar-nav  li {
    float:none;
    display: inline-block;
    margin: 0em;
}
Copier après la connexion

Plus d'articles techniques liés à Bootstrap, s'il vous plaît visitez la colonne Tutoriel Bootstrap pour apprendre !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal