Bootstrap rozwijana: pozycjonowanie treści rozwijanej

Question

Mam następujący rozwijaną

<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> 

górnym lewym rogu rozwijanego jest w lewym dolnym rogu tekstu (działania), ale mam nadzieję, że pozycja górnego prawego rogu dropdwon znajduje się w prawym dolnym rogu tekstu. Jak mogę to zrobić?

Dzięki i pozdrawiam.

Answer 1

Edit:

Począwszy od v3.1.0, mamy przestarzałe .pull prawym w menu rozwijanych. Do wyrównanie w prawo menu, użyj .downdown-menu-right. Prawe wyrównane komponenty nawigacyjne na pasku nawigacyjnym wykorzystują wersję tej klasy do wersji , która automatycznie dopasowuje menu. Aby go zastąpić, użyj .dropdown-menu-left.

Można użyć klasy 'rozwijana-prawo' do linii prawą stronę menu z karetki: skrzypce

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

Praca tutaj: http://jsfiddle.net/jaq54yw8/

Opuściłem moją poprzednią odpowiedź poniżej, na wypadek gdyby ktoś używał Bootstrapa < 3.1.0, ale powinieneś ogólnie używać powyższych (i jeśli nie wydaje się to być praca 01 dwukrotnie sprawdź numer wersji Bootstrapa, który dołączasz)!

Można użyć klasy „pull-prawo” do linii prawą stronę menu z karetki:

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

Answer 2

Nie wiem, jak inni ludzie rozwiązują ten problem lub czy Bootstrap ma jakąkolwiek konfigurację.

znalazłem ten wątek, który stanowi rozwiązanie:

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

Jednym z postu sugeruje zastosowanie

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

Przetestowałem i działa.

Mam nadzieję, że dowiem się, czy Bootstrap zapewnia konfigurację do zrobienia tego, nie przez powyższy css.

Pozdrawiam.

Answer 3

Boostrap ma klasę dla że nazywa navbar-right. Więc Twój kod będzie wyglądać następująco:

<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> 

Answer 4

podstawie Bootstrap Doc:

As od v3.1.0, .pull-prawo jest przestarzałe w menu rozwijanych. użyć.rozwijane menu-prawym

np

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

Answer 5

użyć tego kodu:

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

Answer 6

Jeśli chce wyśrodkować rozwijaną, jest to rozwiązanie.

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

Answer 7

Jeśli chcesz, aby wyświetlić menu, wystarczy dodać klasę „dropup”
i usunąć klasy „rozwijaną” jeśli istnieje od samego div.

<div class="btn-group dropup">