Bootstrap menu déroulant: positionnement du contenu déroulant

J'ai le menu déroulant ci-dessousBootstrap menu déroulant: positionnement du contenu déroulant

<label class="dropdown-toggle" role="button" data-toggle="dropdown" data-target="#"> 
    Action <b class="caret"></b></label> 
<ul class="dropdown-menu" role="menu" aria-labelledby="lang-selector" id="lang-selector"> 
    dropdown content goes here 
</ul>

Le coin supérieur gauche de la liste déroulante est dans le coin inférieur gauche du texte (Action), mais j'espère que la position du coin supérieur droit du dropdwon se trouve en bas à droite du texte. Comment puis je faire ça?

Merci et salutations.

Source

2013-07-28 curious1

130

Edit:

Au v3.1.0, nous avons dépréciée .Retirer droit sur les menus déroulants. Pour aligner à droite un menu, utilisez .dropdown-menu-right. Nav aligné à droite composants dans la barre de navigation utilisent une version mixin de cette classe à automatiquement aligner le menu. Pour le remplacer, utilisez .dropdown-menu-left.

Vous pouvez utiliser la classe 'menu déroulant à droite' à la ligne du côté droit du menu avec le caret:

<li class="dropdown"> 
    <a class="dropdown-toggle" href="#">Link</a> 
    <ul class="dropdown-menu dropdown-menu-right"> 
    <li>...</li> 
    </ul> 
</li>

violon Travailler ici: http://jsfiddle.net/jaq54yw8/

J'ai laissé ma réponse précédente ci-dessous juste au cas où quelqu'un utilise Bootstrap < 3.1.0 mais vous devriez généralement utiliser ce qui précède (et si cela ne semble pas fonctionner vérifiez le numéro de version de Bootstrap que vous incluez)!

Vous pouvez utiliser la classe « pull-droite » à la ligne du côté droit du menu avec le caret:

<li class="dropdown"> 
    <a class="dropdown-toggle" href="#">Link</a> 
    <ul class="dropdown-menu pull-right"> 
    <li>...</li> 
    </ul> 
</li>

Source

2013-10-08 16:52:17

Cela fonctionne pour moi en B3 et semble mieux. J'ai choisi le vôtre comme réponse. Merci!!! – curious1

J'ai testé pull-right et pull-left sur le site de RTL. Ils fonctionnent parfaitement, mais menu déroulant-droite et menu déroulant-gauche non. – curious1

Le conteneur (.dropdown) doit avoir un affichage de "inline-bock". Dans cet exemple, le LI est correct, mais s'il s'agissait d'un DIV, l'alignement serait placé à la fin de l'élément de bloc qui est influencé par la largeur du sous-menu. – Nicholas

Vous ne savez pas comment d'autres personnes ont résolu ce problème ou si Bootstrap a une configuration pour cela.

J'ai trouvé ce fil qui fournit une solution:

https://github.com/twbs/bootstrap/issues/1411

L'un des poste suggère l'utilisation de

<ul class="dropdown-menu" style="right: 0; left: auto;">

Je l'ai testé et il fonctionne.

Espérons savoir si Bootstrap fournit la configuration pour ce faire, pas via le css ci-dessus.

Cheers.

Source

2013-07-28 04:38:27 curious1

Merci, cela aide à faire fonctionner facilement. –

Oui! Merci @ curious1 –

Boostrap a une classe pour cette appelé navbar-right. Donc, votre code sera comme suit:

<ul class="nav navbar-right"> 
    <li class="dropdown"> 
     <a class="dropdown-toggle" href="#" data-toggle="dropdown">Link</a> 
     <ul class="dropdown-menu"> 
     <li>...</li> 
     </ul> 
    </li> 
</ul>

Source

2014-08-19 19:17:33

Ne pas voir l'OP mentionnant la barre de navigation .. – knownasilya

Sur la base de Bootstrap doc:

Au v3.1.0, .Retirer droite est dépréciée dans les menus déroulants. utilisation.Menu déroulant à droite

par exemple:

<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dLabel">

Source

2014-12-06 04:50:36 ninetiger

J'ai testé tirer-droite et tirer-gauche dans le site Web de RTL. Ils fonctionnent parfaitement, mais menu déroulant-droite et menu déroulant-gauche non. – curious1

-3

utilisent ce code:

<ul class="dropdown-menu" role="menu"> 
    <li style="text-align: right;"><a href="#">ParsLearn[dot]ir</a></li> 
</ul>

Source

2015-02-18 18:45:50

Je ne pense pas que cela fait ce qu'il demande –

Si vous veut centrer le menu déroulant, c'est la solution.

<ul class="dropdown-menu" style="right:auto; left: auto;">

Source

2016-01-31 04:59:08

Si vous souhaitez afficher le menu, il suffit d'ajouter la classe « dropup »
et de supprimer la classe « menu déroulant » si elle existe de la même div.

<div class="btn-group dropup">

Source

2016-10-11 09:01:30

"J'espère que la position du coin supérieur droit du dropdwon est à la partie inférieure droite du texte" - OP –

Je ne comprends pas votre commentaire, désolé! ! –

Bootstrap menu déroulant: positionnement du contenu déroulant

Répondre

Questions connexes