Пункты раскрывающегося меню Bootstrap Navbar справа

Bootstrap 5 (обновление 2021 г.)

Используйте класс dropdown-menu-end для dropdown-menu, чтобы выровнять элементы внутри меню вправо.

    <div class="dropdown-menu dropdown-menu-end">
        <a class="dropdown-item" href="#">Link</a>
        <a class="dropdown-item" href="#">Link</a>
        <a class="dropdown-item" href="#">Link</a>
    </div>

https://codeply.com/p/kWLLKdjdpC

Bootstrap 4 (исходный ответ)

Используйте класс dropdown-menu-right, чтобы выровнять элементы внутри меню вправо.

    <div class="dropdown-menu dropdown-menu-right text-right">
        <a class="dropdown-item" href="#">Link</a>
        <a class="dropdown-item" href="#">Link</a>
        <a class="dropdown-item" href="#">Link</a>
    </div>

http://codeply.com/go/6Mf9aK0P8G

Обновление для Bootstrap4-бета:

Поскольку в бета-версии bootstrap4 есть ошибка, мне пришлось добавить

.dropdown-menu-right { 
    right: 0; 
    left: auto; 
}

чтобы заставить его работать.

Класс .dropdown-menu-right имеет другое поведение, если он находится внутри класса .navbar. Вы можете прочитать «Heads up» в документах здесь:

https://getbootstrap.com/docs/4.0/components/dropdowns/#menu-alignment

На самом деле для решения я использую этот класс:

.navbar .dropdown-menu-right { 
    right: 0; 
    left: auto; 
}

Это небольшое изменение в boostrap 4. Чтобы выровнять панель навигации по правой стороне, вам нужно сделать всего два изменения. они есть:

1. в классе navbar-nav добавьте w-100 как navbar-nav w-100, чтобы сделать ширину равной 100
2. в классе nav-item dropdown добавьте ml-auto как nav-item dropdown ml-auto, чтобы сделать поле слева автоматическим.

Если вы не поняли, пожалуйста, обратитесь к этому

https://stackoverflow.com/a/58474527/10907720

Я изменил его, добавив dir="rtl"

<div class="dropdown-menu " dir="rtl" aria-labelledby="navbarDropdownMenuLink">
            <a class="dropdown-item " href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
</div>

Я столкнулся с той же проблемой с дополнительной трудностью, потому что мое меню создано на PHP - количество элементов и выпадающего содержимого не фиксировано.

Вот решение, которое по возможности центрирует раскрывающиеся списки, в противном случае выравнивает их по левому или правому краю, чтобы предотвратить выход за пределы области просмотра:

var $maxWidthElement = $('.navbar'),
    maxWidth = $maxWidthElement.width();

var positionDropdowns = function() {
    $('.dropdown-menu').each(function() {
        var $navItem = $(this).closest('.dropdown'),
            dropdownWidth = $(this).outerWidth(),
            dropdownOffsetLeft = $navItem.offset().left,
            dropdownOffsetRight = maxWidth - (dropdownOffsetLeft + dropdownWidth),
            linkCenterOffsetLeft = dropdownOffsetLeft + $navItem.outerWidth() / 2;

        if ((linkCenterOffsetLeft - dropdownWidth / 2 > 0) & (linkCenterOffsetLeft + dropdownWidth / 2 < maxWidth)) {
            // center the dropdown menu if possible
            $(this).css('left', -(dropdownWidth / 2 - $navItem.outerWidth() / 2));
        } else if ((dropdownOffsetRight < 0) & (dropdownWidth < dropdownOffsetLeft + $navItem.outerWidth())) {
            // set the dropdown menu to left if it exceeds the viewport on the right
            $(this).addClass('dropdown-menu-right');
        } else if (dropdownOffsetLeft + dropdownWidth > maxWidth) {
            // full width if the dropdown is too large to fit on the right
            $(this).css({
                left: 0,
                right: 0,
                width:
                    $(this)
                        .closest('.container')
                        .width() + 'px'
            });
        }
    });
};

var resizeTimer;

$(window).on('resize', function(e) {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(function() {
        maxWidth = $maxWidthElement.width();
        positionDropdowns();
    }, 250);
});

positionDropdowns();
window.onresize = positionDropdowns;

https://codepen.io/migli/pen/RELPPj

Начальная загрузка 5

Ответ @Zim, вероятно, самый правильный, как это предлагается в документах.

<ul class="dropdown-menu end-0">
  <li><a class="dropdown-item" href="#">Save</a></li>
  <li><a class="dropdown-item" href="#">Fetch</a></li>
</ul>