트위터 부트 스트랩 하위 메뉴를 왼쪽에서 여는 방법은 무엇입니까?

드롭 다운 메뉴에서 트위터 부트 스트랩 하위 메뉴를 만들려고했지만 문제가 있습니다. 페이지의 오른쪽 상단에 드롭 다운 메뉴가 있고 해당 메뉴에 하위 메뉴가 하나 더 있습니다. 그러나 하위 메뉴가 열리면 창에 맞지 ​​않고 오른쪽으로 너무 많이 이동하여 사용자가 첫 글자 만 볼 수 있습니다. 하위 메뉴가 오른쪽이 아닌 왼쪽으로 열리도록 만드는 방법은 무엇입니까?

가장 간단한 방법은 pull-left클래스를 추가하는 것입니다.dropdown-submenu

<li class="dropdown-submenu pull-left">

jsfiddle : 데모

이 권리를 이해했다면 부트 스트랩은이 경우에만 CSS 클래스를 제공합니다. 메뉴 'ul'에 'pull-right'추가 :

<ul class="dropdown-menu pull-right">

.. 그리고 최종 결과는 메뉴 옵션이 드롭 다운되는 버튼과 나란히 오른쪽 정렬되어 나타납니다.

Curent 클래스 .dropdown-submenu > .dropdown-menu는 left: 100%;. 따라서 왼쪽에 하위 메뉴를 열려면 해당 설정을 음수 왼쪽 위치로 재정의하십시오. 예를 들면 left: -95%;. 이제 왼쪽에 하위 메뉴가 표시되고 다른 설정을 조정하여 완벽한 미리보기를 얻을 수 있습니다.

여기 데모입니다

편집 : OP의 질문과 내 대답은 2012 년 8 월부터입니다. 한편, 부트 스트랩이 변경되었으므로 이제 .pull-left 클래스가 있습니다. 그 당시 제 대답은 맞았습니다. 이제 수동으로 CSS를 설정할 필요가 없으며 .pull-left 클래스가 있습니다.

편집 2 : Bootstrap이 URL을 변경했기 때문에 데모가 작동하지 않습니다. jsfiddle에서 외부 리소스를 변경하고 새 리소스로 교체하십시오.

부트 스트랩 v4를 사용하는 경우이를 수행하는 새로운 방법이 있습니다.

요소 .dropdown-menu-right에 사용해야합니다 .dropdown-menu.

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Right-aligned menu
  </button>
  <div class="dropdown-menu dropdown-menu-right">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</div>

코드 링크 : https://getbootstrap.com/docs/4.0/components/dropdowns/#menu-items

작업을 수행하는 올바른 방법은 다음과 같습니다.

/* Submenu placement itself */
.dropdown-submenu > .dropdown-menu { left: auto; right: 100%; }
/* Arrow position */
.dropdown-submenu { position: relative; }
.dropdown-submenu > a:after { position: absolute; left: 7px; top: 3px; float: none; border-right-color: #cccccc; border-width: 5px 5px 5px 0; }
.dropdown-submenu:hover > a:after { border-right-color: #ffffff; }

오른쪽에 충분한 공간이 있는지 확인하는 자바 스크립트 함수를 만들었습니다. 있는 경우 오른쪽에 표시하고 그렇지 않으면 왼쪽에 표시합니다.

테스트 :

• Firefox (mac)
• Chorme (맥)
• Safari (Mac)

자바 스크립트 :

$(document).ready(function(){
    //little fix for the poisition.
    var newPos     = $(".fixed-menuprofile .dropdown-submenu").offset().left - $(this).width();
    $(".fixed-menuprofile .dropdown-submenu").find('ul').offset({ "left": newPos });

    $(".fixed-menu .dropdown-submenu").mouseover(function() {
        var submenuPos = $(this).offset().left + 325;
        var windowPos  = $(window).width();
        var oldPos     = $(this).offset().left + $(this).width();
        var newPos     = $(this).offset().left - $(this).width();

        if( submenuPos > windowPos ){
            $(this).find('ul').offset({ "left": newPos });
        } else {
            $(this).find('ul').offset({ "left": oldPos });
        }
    });
});

새 클래스를 만든 모든 메뉴 항목에이 수정 사항을 추가하고 싶지 않기 때문입니다. ul에 고정 메뉴 배치 :

<ul class="dropdown-menu fixed-menu">

나는 이것이 당신을 위해 잘되기를 바랍니다.

추신. 사파리와 크롬의 작은 버그, 첫 번째 호버는 왼쪽으로 mutch에 배치하면 수정하면이 게시물을 업데이트합니다.

레벨이 하나만 있고 부트 스트랩 3을 사용 pull-right하는 경우 ul요소에 추가

<ul class="dropdown-menu pull-right" role="menu">

실제로- dropdown래퍼 를 플로팅하는 것이 괜찮다 navbar-right면 dropdown.

이것은 navbar에 없기 때문에 속임수처럼 보이지만 잘 작동합니다.

<div class="dropdown navbar-right">
...
</div>

그런 다음 더는 A 부동 사용자 정의 할 수 있습니다 pull-left에 직접 dropdown...

<div class="dropdown pull-left navbar-right">
...
</div>

... 또는 그 주위의 포장지로 ...

<div class="pull-left">
  <div class="dropdown navbar-right">
  ...
  </div>
</div>

LESS CSS를 사용하는 경우 연결 화살표로 드롭 다운을 이동하기 위해 약간의 믹스 인을 작성했습니다.

.dropdown-menu-shift( @num-pixels, @arrow-position: 10px ) {  // mixin to shift the dropdown menu
    left: @num-pixels;
    &:before { left: -@num-pixels + @arrow-position; }        // triangle outline
    &:after  { left: -@num-pixels + @arrow-position + 1px; }  // triangle internal
}

그런 다음 예를 들어 .dropdown-menuID를 사용 하여 이동하려면 다음을 dropdown-menu-x수행하십시오.

#dropdown-menu-x {
    .dropdown-menu-shift( -100px );
}

오른쪽에 충분한 공간이 있는지 확인하는 자바 스크립트 함수를 만들었습니다. 그것이 있으면 그는 그것을 오른쪽에 표시하고 그렇지 않으면 왼쪽에 표시합니다. 다시 오른쪽에 충분한 공간이 있으면 오른쪽에 표시됩니다. 그것은 루프입니다 ...

$(document).ready(function () {

$('body, html').css('overflow', 'hidden');
var screenWidth = $(window).width();
$('body, html').css('overflow', 'visible');

if (screenWidth > 767) {

    $(".dropdown-submenu").hover(function () {

        var dropdownPosition = $(this).offset().left + $(this).width() + $(this).find('ul').width();
        var newPosition = $(this).offset().left - $(this).find('ul').width();
        var windowPosition = $(window).width();

        var oldPosition = $(this).offset().left + $(this).width();
        //document.title = dropdownPosition;
        if (dropdownPosition > windowPosition) {
            $(this).find('ul').offset({ "left": newPosition });
        } else {
            $(this).find('ul').offset({ "left": oldPosition });
        }
    });

}

});

최신 버전의 부트 스트랩을 사용하고 있습니까? 아래 표시된대로 Fluid Layout 예제 의 html을 수정했습니다 . 드롭 다운을 추가하고 pull-right클래스 를 추가하여 가장 오른쪽에 배치했습니다 . 드롭 다운 메뉴 위로 마우스를 가져 가면 자동으로 왼쪽으로 당겨지고 아무것도 숨겨지지 않고 모든 메뉴 텍스트가 표시됩니다. 사용자 지정 CSS를 사용하지 않았습니다.

<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container-fluid">
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      <a class="brand" href="#">Project name</a>
      <div class="nav-collapse collapse">
        <ul class="nav pull-right">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#contact">Contact</a></li>
          <li class="dropdown open">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li class="divider"></li>
              <li class="nav-header">Nav header</li>
              <li><a href="#">Separated link</a></li>
              <li><a href="#">One more separated link</a></li>
            </ul>
          </li>
        </ul>
        <p class="navbar-text pull-right">
          Logged in as <a href="#" class="navbar-link">Username</a>
        </p>
      </div><!--/.nav-collapse -->
    </div>
  </div>
</div>

당신이해야 할 일은

 <ul style='left:-100%'> 

오른쪽에 표시하려는 메뉴의.