Bootstrap: Vị trí của menu thả xuống so với mục trên thanh điều hướng

Tôi có danh sách thả xuống sau

<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óc trên bên trái của menu thả xuống nằm ở góc dưới bên trái của văn bản (Hành động), nhưng tôi hy vọng rằng vị trí của góc trên bên phải của menu thả xuống nằm ở vị trí dưới bên phải của văn bản. Làm thế nào tôi có thể làm điều đó?

Đây là hiệu quả mà chúng tôi đang cố gắng đạt được:

Các lớp cần được áp dụng đã thay đổi khi phát hành Bootstrap 3.1.0 và một lần nữa với việc phát hành Bootstrap 4. Nếu một trong các giải pháp dưới đây dường như không hoạt động, hãy kiểm tra lại số phiên bản Bootstrap mà bạn đang nhập và thử một cái khác.

Bootstrap 3

Trước v3.1.0

Bạn có thể sử dụng pull-rightlớp này để căn lề bên phải của menu với dấu mũ:

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

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

Sau v3.1.0

Kể từ v3.1.0, chúng tôi đã ngừng sử dụng .pull-right trên menu thả xuống. Để căn phải menu, hãy sử dụng .dropdown-menu-right. Các thành phần điều hướng được căn phải trong thanh điều hướng sử dụng phiên bản mixin của lớp này để tự động căn chỉnh menu. Để ghi đè nó, hãy sử dụng .dropdown-menu-left.

Bạn có thể sử dụng dropdown-rightlớp này để căn lề bên phải của menu với dấu mũ:

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

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

Bootstrap 4

Lớp cho Bootstrap 4 cũng giống như Bootstrap> 3.1.0, chỉ cần chú ý phần còn lại của đánh dấu xung quanh đã thay đổi một chút:

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

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

Không chắc chắn về cách những người khác giải quyết vấn đề này hoặc liệu Bootstrap có bất kỳ cấu hình nào cho việc này hay không.

Tôi tìm thấy chủ đề này cung cấp giải pháp:

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

Một trong những bài đăng đề xuất việc sử dụng

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

Tôi đã thử nghiệm và nó hoạt động.

Hy vọng có thể biết liệu Bootstrap có cung cấp cấu hình để thực hiện việc này hay không thông qua css ở trên.

Chúc mừng.

Dựa trên tài liệu Bootstrap:

Kể từ v3.1.0, .pull-right không được dùng trên menu thả xuống. sử dụng .dropdown-menu-right

ví dụ:

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

Nếu bạn muốn hiển thị menu lên, chỉ cần thêm "dropup"
của lớp và xóa "dropdown" của lớp nếu tồn tại từ cùng một div.

<div class="btn-group dropup">

Ngay cả khi nó đã muộn, tôi hy vọng tôi có thể giúp một ai đó. nếu menu thả xuống hoặc menu con ở bên phải màn hình, nó sẽ mở ở bên trái, nếu menu hoặc menu con ở bên trái, nó sẽ mở ở bên phải.

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

});

Để phát hiện vị trí dọc, bạn cũng có thể thêm

$( 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 có một lớp cho cái gọi là navbar-right. Vì vậy, mã của bạn sẽ trông như sau:

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

Nếu bạn muốn căn giữa menu thả xuống, đây là giải pháp.

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