Bootstrap Dropdown-Blase rechts ausrichten (nicht rechts drücken)

88

Ich habe einen Warenkorb in meinem Hauptmenü push-rightund mein Problem ist, dass die Dropdown-Blase aus der Seite fällt. Ich versuche, die Blase nach rechts auszurichten, sodass sie mit "Klicken" nach rechts ausgerichtet ist.

so was

Geben Sie hier die Bildbeschreibung ein

HTML:

<div class="cart pull-right">
  <ul class="nav">
    <li class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">CLICK</a>
       <div class="dropdown-menu">
       STUFF
       </div>
    </li>
  </ul>
</div>

html css twitter-bootstrap

— no0ne
quelle

2

Es ist besser, in jsfiddle.net zu setzen , um anderen zu zeigen, was Sie haben.

— JofryHS

right:0;Hast du es mit Dropdown versucht ?

— Rahul

9

Ich mag die Illustration :)

— Brett Gregson

188

Bootstrap 3.1+

Hinzufügen der Klasse .dropdown-menu-right zu demselben Div, der das Klassen-Dropdown-Menü enthält:

<div class="dropdown-menu dropdown-menu-right">
    STUFF
</div>

http://getbootstrap.com/components/#dropdowns-alignment

Bootstrap 2.3 & 3.0

Fügen Sie die Klasse .pull-right zu demselben Div hinzu, das das Dropdown-Menü der Klasse enthält

<div class="dropdown-menu pull-right">
    STUFF
</div>

Dies scheint für mich mit Bootstrap 3.0 zu funktionieren

— Meetri
quelle

20

Seit v3.1.0 können Sie das Dropdown-Menü rechts verwenden . Siehe github.com/twbs/bootstrap/blob/v3.1.0/less/dropdowns.less#L135

— Laurent Dezitter

19

Dies kann mit der Bootstrap - Klasse gelöst wird dropdown-menu-right mit dropdown-menuder speziell für dieses Problem ist , dass die CSS - Eigenschaften verwendet right: 0;und left: auto;nach rechts ausrichten.

Diese Lösung funktioniert bei mir.

Quelle - http://getbootstrap.com/components/#btn-dropdowns-dropup (siehe dazu die Entwicklertools)

— Jaspreet Singh
quelle

1

Ja, dies ist die richtige Lösung (Bootstrap 3.3.7). Stellen Sie einfach sicher, dass Sie die Klasse dropdown-menu-rightzu der hinzufügen ul, die die Menüoptionen enthält (nicht zur Schaltfläche)

— Miguel

6

<div class="dropdown-menu dropdown-menu-right">

Dies funktioniert immer noch in Boostrap 4.2.1 :)

— Georgi Peev
quelle

5

in bootstrap v 3.1.0der Antwort auf diese Frage ist anders.

jsfiddle

<div class="dropdown-menu pull-menu-right">
       STUFF
</div>

— Coding Enthusiast
quelle

2

OK habe es!

position:relative;left:0 auf <ul class="dropdown-menu">

— no0ne
quelle