Запуск: розташування випадаючого меню відносно елемента навбара

У мене є таке спадне меню

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

Лівий верхній кут випадаючого меню знаходиться в лівому нижньому куті тексту (Дія), але я сподіваюсь, що положення правого верхнього кута спаду знаходиться в правому нижньому місці тексту. Як я можу це зробити?

Це той ефект, якого ми намагаємося досягти:

Класи, які потрібно застосувати, змінилися з випуском Bootstrap 3.1.0 і знову з випуском Bootstrap 4. Якщо одне з наведених нижче рішень не працює, подвійно перевірте номер версії Bootstrap, яку ви імпортуєте і спробуйте інший.

Завантаження 3

До версії 1.3

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

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

Після v3.1.0

Станом на v3.1.0, у спадному меню ми застаріли .pull-right. Щоб вирівняти меню праворуч, використовуйте .dropdown-menu-right. Праві вирівняні компоненти компонентів нави в панелі навігації використовують змішану версію цього класу для автоматичного вирівнювання меню. Щоб змінити його, використовуйте меню .dropdown-ліворуч.

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

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

Завантаження 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>

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

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

Я знайшов цю тему, яка пропонує рішення:

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

Один з дописів пропонує використовувати

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

Я тестував, і це працює.

Сподіваємось дізнатись, чи надає Bootstrap конфігурацію для цього, а не через вищевказаний css.

Ура.

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

Починаючи з v3.1.0, .pull-right є застарілим у випадаючих меню. використовувати .dropdown-меню-право

наприклад:

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

Якщо ви хочете відобразити меню вгору, просто додайте клас "дропп"
та видаліть клас "випадаюче", якщо воно є з того самого розділу.

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