web-dev-qa-db-fra.com

Bootstrap 3 centre du menu déroulant aligner ne fonctionne pas

Je ne suis pas en mesure d'aligner la liste déroulante sur le centre du parent sur lequel la liste déroulante est ouverte avec le survol. J'ai essayé d'aligner le texte: centre pour l'ensemble des éléments .nav .navbar li, et cela ne fonctionne pas. J'ai essayé de définir la marge et je suis parti: 50% pour l'ensemble du menu ul.dropdown qui est le menu déroulant et cela ne fonctionne pas. Voici le code html:

<ul class="nav navbar-nav navbar-right" id="headerDropdowns">
  <li><div class="btn-toolbar">
    <div class="btn-group">
      <button class="btnCustom" data-toggle="dropdown" data-hover="dropdown" data-delay="1000">Our Difference</button>
      <ul class="dropdown-menu">
        <li><a tabindex="-1" href="#">Made in the USA</a></li>
        <li class="divider"></li>
        <li><a tabindex="-1" href="#">Human Grade</a></li>
        <li class="divider"></li>
        <li><a tabindex="-1" href="#">Ingredients Fresh</a></li>
        <li class="divider"></li>
        <li><a tabindex="-1" href="#">USDA Meats</a></li>
        <li class="divider"></li>
        <li><a tabindex="-1" href="#">Our Story</a></li>
        <li class="divider"></li>
        <li><a tabindex="-1" href="#">Campare</a></li>
      </ul>
    </div>
  </li>
</ul>

Dans quelle classe menu déroulant, ou nav navbar-nav, dois-je faire l'alignement, et que dois-je définir?

htmlcsstwitter-bootstrapdrop-down-menubootstrap-4
24
Matija

Vous pouvez utiliser la transformation pour éviter d'avoir à utiliser des largeurs fixes:

.dropdown-menu {
  left: 50%;
  right: auto;
  text-align: center;
  transform: translate(-50%, 0);
}

Réponse influencée par http://css-tricks.com/centering-percentage-widthheight-elements/

77
PaulPrecept

Vous pouvez le faire tant que vous êtes prêt à donner au menu déroulant ul une largeur fixe. Voir le code ci-dessous:

.dropdown{text-align:center;}
.button, .dropdown-menu{margin:10px auto}
.dropdown-menu{width:200px; left:50%; margin-left:-100px;}

Les 2 premières déclarations sont à des fins de visualisation, mais la partie importante est la 3ème ligne. Vous devrez définir une largeur (dans ce cas 200px) puis un margin-left égal à la moitié de la largeur. Cela fonctionnera avec n'importe quelle largeur, peu importe si le bouton est à droite, à gauche ou entre les éléments (mais bien sûr, vous aurez probablement besoin d'espace pour l'élément button)

Vous pouvez voir un violon ici

5
Devin

La seule façon laide est de définir la position en fonction de vos besoins, comme:

.dropdown-menu{
    right: -25px !important;
}

Violon

Mais ce n'est pas la façon dont il devrait être utilisé. N'oubliez pas que vous devez ajuster le paramètre pour tous les périphériques multimédias.

1
Steven Web