Bootstrap: Gezinti çubuğu öğesine göre açılır menünün konumu

Aşağıdaki açılır menüye sahibim

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

Açılır listenin sol üst köşesi metnin sol alt köşesindedir (Eylem), ancak dropdwon'un sağ üst köşesinin konumunun metnin sağ alt yerinde olmasını umuyorum. Bunu nasıl yapabilirim?

Ulaşmaya çalıştığımız etki bu:

Uygulanması gereken sınıflar Bootstrap 3.1.0 sürümüyle ve yine Bootstrap 4 sürümüyle değişti. Aşağıdaki çözümlerden biri çalışmıyorsa , içe aktardığınız Bootstrap sürüm numarasını iki kez kontrol edin ve farklı bir tane deneyin.

Önyükleme 3

Sürüm 3.1.0'dan önce

pull-rightMenünün sağ tarafını imleçle hizalamak için sınıfı kullanabilirsiniz :

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

Keman: http://jsfiddle.net/joeczucha/ewzafdju/

V3.1.0'dan sonra

V3.1.0'dan itibaren, açılır menülerde .pull-right'ı kullanımdan kaldırdık. Bir menüyü sağa hizalamak için .dropdown-menu-right'ı kullanın. Gezinme çubuğundaki sağa hizalanmış nav bileşenleri, menüyü otomatik olarak hizalamak için bu sınıfın bir mixin sürümünü kullanır. Bunu geçersiz kılmak için .dropdown-menu-left'i kullanın.

dropdown-rightMenünün sağ tarafını imleçle hizalamak için sınıfı kullanabilirsiniz :

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

Keman: http://jsfiddle.net/joeczucha/1nrLafxc/

Önyükleme 4

Bootstrap 4 sınıfı Bootstrap> 3.1.0 ile aynıdır, sadece çevreleyen işaretlemenin biraz değiştiğine dikkat edin:

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#">
    Link
  </a>
  <div class="dropdown-menu dropdown-menu-right">
    <a class="dropdown-item" href="#">...</a>
  </div>
</li>

Keman: https://jsfiddle.net/joeczucha/f8h2tLoc/

Başkalarının bu sorunu nasıl çözdüğünden veya Bootstrap'in bunun için herhangi bir yapılandırması olup olmadığından emin değilsiniz.

Bir çözüm sağlayan bu konuyu buldum:

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

Gönderilerden biri şunu öneriyor:

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

Test ettim ve işe yarıyor.

Bootstrap'in yukarıdaki css aracılığıyla değil, bunu yapmak için yapılandırma sağlayıp sağlamadığını öğrenmeyi umuyoruz.

Şerefe.

Bootstrap belgesine göre:

V3.1.0'dan itibaren, .pull-right açılır menülerde kullanımdan kaldırılmıştır. .dropdown-menu-right'ı kullanın

Örneğin:

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

Menüyü görüntülemek istiyorsanız, "dropup" sınıfını eklemeniz ve aynı div'de
varsa "dropdown" sınıfını kaldırmanız yeterlidir .

<div class="btn-group dropup">

Geç olsa bile umarım birine yardım edebilirim. Açılır menü veya alt menü ekranın sağ tarafındaysa sol tarafta, menü veya alt menü solda ise sağ tarafta açılır.

$(".dropdown-toggle").on("click", function(event){//"show.bs.dropdown"
    var liparent=$(this.parentElement);
    var ulChild=liparent.find('ul');
    var xOffset=liparent.offset().left;
    var alignRight=($(document).width()-xOffset)<xOffset;


    if (liparent.hasClass("dropdown-submenu"))
    {
        ulChild.css("left",alignRight?"-101%":"");
    }
    else
    {                
        ulChild.toggleClass("dropdown-menu-right",alignRight);
    }

});

Dikey konumu tespit etmek için ayrıca ekleyebilirsiniz.

$( document ).ready(function() {
        var liparent=$(".dropdown");
    var yOffset=liparent.offset().top;
        var toTop=($(document).height()-yOffset)<yOffset;
    liparent.toggleClass("dropup",toTop);
});

https://jsfiddle.net/jd1100/rf9zvdhg/28/

Boostrap, adı verilen bir sınıfa sahiptir navbar-right. Yani kodunuz aşağıdaki gibi görünecek:

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

Açılır listeyi ortalamak istiyorsanız, çözüm budur.

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