Bootstrap: Posisi menu dropdown relatif terhadap item navbar

Saya memiliki dropdown berikut

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

Sudut kiri atas dropdown berada di sudut kiri bawah teks (Action), tetapi saya berharap posisi sudut kanan atas dropdwon berada di kanan bawah teks. Bagaimana saya bisa melakukan itu?

Inilah efek yang kami coba capai:

Kelas yang perlu diterapkan diubah dengan rilis Bootstrap 3.1.0 dan lagi dengan rilis Bootstrap 4. Jika salah satu solusi di bawah ini tampaknya tidak berfungsi, periksa kembali nomor versi Bootstrap yang Anda impor dan coba yang lain.

Bootstrap 3

Sebelum v3.1.0

Anda dapat menggunakan pull-rightkelas untuk melapisi sisi kanan menu dengan tanda sisipan:

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

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

Setelah v3.1.0

Mulai v3.1.0, kami telah menghentikan .pull-right pada menu drop-down. Untuk meratakan kanan menu, gunakan .dropdown-menu-right. Komponen navigasi rata kanan di bilah navigasi menggunakan versi mixin dari kelas ini untuk menyelaraskan menu secara otomatis. Untuk menggantinya, gunakan .dropdown-menu-left.

Anda dapat menggunakan dropdown-rightkelas untuk melapisi sisi kanan menu dengan tanda sisipan:

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

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

Bootstrap 4

Kelas untuk Bootstrap 4 sama dengan Bootstrap> 3.1.0, perhatikan saja karena markup sekitarnya telah sedikit berubah:

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

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

Tidak yakin tentang bagaimana orang lain memecahkan masalah ini atau apakah Bootstrap memiliki konfigurasi untuk ini.

Saya menemukan utas ini yang memberikan solusi:

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

Salah satu postingan menyarankan penggunaan

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

Saya menguji dan berhasil.

Harapan untuk mengetahui apakah Bootstrap menyediakan konfigurasi untuk melakukan ini, bukan melalui css di atas.

Bersulang.

Berdasarkan dokumen Bootstrap:

Mulai v3.1.0, .pull-right tidak digunakan lagi di menu drop-down. gunakan .dropdown-menu-right

misalnya:

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

Jika ingin menampilkan menu up, tambahkan saja class "dropup"
dan hapus class "dropdown" jika ada dari div yang sama.

<div class="btn-group dropup">

Meskipun terlambat, saya harap saya dapat membantu seseorang. Jika menu dropdown atau submenu ada di sisi kanan layar, maka menu atau submenu ada di sisi kiri, jika menu atau submenu ada di kiri, menu atau submenu ada di sisi kanan.

$(".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);
    }

});

Untuk mendeteksi posisi vertikal Anda juga dapat menambahkan

$( 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 memiliki kelas yang disebut navbar-right. Jadi kode Anda akan terlihat seperti berikut:

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

Jika Anda ingin memusatkan dropdown, inilah solusinya.

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