부트 스트랩 : navbar 항목에 상대적인 드롭 다운 메뉴의 위치

다음 드롭 다운이 있습니다.

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

드롭 다운의 왼쪽 상단은 텍스트 (Action)의 왼쪽 하단에 있지만 드롭 다운의 오른쪽 상단은 텍스트의 오른쪽 하단에 위치하기를 바랍니다. 어떻게 할 수 있습니까?

이것이 우리가 달성하고자하는 효과입니다.

적용해야하는 클래스는 Bootstrap 3.1.0 릴리스와 Bootstrap 4 릴리스와 함께 변경되었습니다. 아래 솔루션 중 하나가 작동하지 않는 것 같으면 가져 오는 Bootstrap의 버전 번호를 다시 확인하십시오. 다른 것을 시도하십시오.

부트 스트랩 3

v3.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 이후

v3.1.0부터 드롭 다운 메뉴에서 .pull-right가 더 이상 사용되지 않습니다. 메뉴를 오른쪽 정렬하려면 .dropdown-menu-right를 사용하십시오. navbar에서 오른쪽 정렬 된 nav 구성 요소는이 클래스의 mixin 버전을 사용하여 메뉴를 자동으로 정렬합니다. 재정의하려면 .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;">

나는 테스트했고 작동합니다.

부트 스트랩이 위의 CSS를 통하지 않고이를위한 설정을 제공하는지 알고 싶습니다.

건배.

Bootstrap 문서를 기반으로 :

v3.1.0부터 .pull-right는 드롭 다운 메뉴에서 더 이상 사용되지 않습니다. .dropdown-menu-right 사용

예 :

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

메뉴를 표시하려면 "dropup"클래스를 추가
하고 동일한 div에있는 경우 "dropdown"클래스를 제거하십시오.

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