rozwijana bańka bootstrap wyrównaj do prawej (nie przesuń w prawo)


90

Mam koszyk w górnym menu, używam push-righti moim problemem jest to, że rozwijana bańka wypada ze strony. Próbuję wyrównać bąbelek do prawej, tak aby był wyrównany do prawej z „kliknięciem”

lubię to

wprowadź opis obrazu tutaj

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>

2
Lepiej jest wejść na jsfiddle.net, aby pokazać innym, co masz.
JofryHS,

próbowałeś right:0;na liście rozwijanej?
Rahul

Odpowiedzi:


191

Bootstrap 3.1+

Dodanie klasy .dropdown-menu-right do tego samego elementu div zawierającego menu rozwijane klasy:

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

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

Bootstrap 2.3 i 3.0

Dodaj klasę .pull-right do tego samego elementu div zawierającego menu rozwijane klasy

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

Wydaje się, że to działa w przypadku mnie przy użyciu bootstrap 3.0


20
Od wersji 3.1.0 można używać menu rozwijanego po prawej stronie . Zobacz github.com/twbs/bootstrap/blob/v3.1.0/less/dropdowns.less#L135
Laurent Dezitter

19

Problem ten można rozwiązać z klasy bootstrap dropdown-menu-right ze dropdown-menuto specjalnie dla tego problemu, który wykorzystuje właściwości css right: 0;i left: auto;do prawej wyrównać go.

To rozwiązanie działa na mnie.

Źródło - http://getbootstrap.com/components/#btn-dropdowns-dropup (przejdź do narzędzi programistycznych w tym celu)


1
Tak, to jest poprawne rozwiązanie (Bootstrap 3.3.7). Tylko upewnij się, że dodałeś klasę dropdown-menu-rightdo ulzawierającej opcje menu (nie do przycisku)
Miguel

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

To nadal działa w boostrap 4.2.1 :)



2

ok, rozumiem!

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

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.