Bootstrap: положение раскрывающегося меню относительно элемента панели навигации

У меня есть следующий раскрывающийся список

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

Верхний левый угол раскрывающегося списка находится в нижнем левом углу текста (Действие), но я надеюсь, что положение верхнего правого угла dropdwon будет в правом нижнем углу текста. Как я могу это сделать?

Это тот эффект, которого мы пытаемся достичь:

Классы, которые необходимо применить, были изменены с выпуском Bootstrap 3.1.0 и снова с выпуском Bootstrap 4. Если одно из приведенных ниже решений не работает, дважды проверьте номер версии Bootstrap, который вы импортируете. и попробуйте другой.

Бутстрап 3

До версии 3.1.0

Вы можете использовать pull-rightкласс, чтобы выровнять правую часть меню с помощью курсора:

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

Скрипка: http://jsfiddle.net/joeczucha/ewzafdju/

После v3.1.0

Начиная с версии 3.1.0, мы устарели .pull-right в раскрывающихся меню. Чтобы выровнять меню по правому краю, используйте .dropdown-menu-right. Компоненты навигации, выровненные по правому краю на панели навигации, используют версию миксина этого класса для автоматического выравнивания меню. Чтобы переопределить его, используйте .dropdown-menu-left.

Вы можете использовать dropdown-rightкласс, чтобы выровнять правую часть меню с помощью курсора:

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

Сценарий: http://jsfiddle.net/joeczucha/1nrLafxc/

Бутстрап 4

Класс для Bootstrap 4 такой же, как и для Bootstrap> 3.1.0, только обратите внимание, как остальная окружающая разметка немного изменилась:

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

Скрипка: https://jsfiddle.net/joeczucha/f8h2tLoc/

Не уверен, как другие люди решают эту проблему и есть ли у Bootstrap какие-либо настройки для этого.

Я нашел этот поток, который предлагает решение:

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

В одном из постов предлагается использовать

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

Я протестировал, и все работает.

Надеюсь узнать, предоставляет ли Bootstrap конфигурацию для этого, а не через указанный выше css.

Ура.

На основе документа Bootstrap:

Начиная с v3.1.0, .pull-right не рекомендуется в раскрывающихся меню. используйте .dropdown-menu-right

например:

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

Если вы хотите отобразить меню вверх, просто добавьте класс «dropup»
и удалите класс «dropdown», если он существует в том же div.

<div class="btn-group dropup">

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

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

});

Для определения вертикального положения вы также можете добавить

$( 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 есть класс для этого navbar-right. Итак, ваш код будет выглядеть следующим образом:

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

Если вы хотите центрировать раскрывающийся список, это решение.

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