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

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

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

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

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

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

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

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

Приветствия.

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

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

например:

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

Если вы хотите отобразить меню вверх, просто добавьте класс "выпадающий"
и удалите класс "выпадающий", если существует из того же div.

<div class="btn-group dropup">

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>

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

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

});

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

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

используйте этот код:

<ul class="dropdown-menu" role="menu">
  <li style="text-align: right;"><a href="#">ParsLearn[dot]ir</a></li>
</ul>