어떻게 하면 트위터 부트스트랩 하위 메뉴를 왼쪽에서 열 수 있습니까?

어떻게 하면 트위터 부트스트랩 하위 메뉴를 왼쪽에서 열 수 있습니까?

드롭다운 메뉴에서 트위터 부트스트랩 하위 메뉴를 만들려고 했는데 문제가 생겼습니다.페이지 오른쪽 상단에 드롭다운 메뉴가 있고 그 메뉴에는 하위 메뉴가 하나 더 있습니다.그러나 하위 메뉴가 열리면 창에 맞지 않고 오른쪽으로 너무 많이 이동하여 사용자는 첫 글자만 볼 수 있습니다.어떻게 하면 그 하위 메뉴를 오른쪽이 아닌 왼쪽으로 열 수 있을까요?

만약 내가 이것을 제대로 이해했다면, 부트스트랩은 이 경우에만 CSS 클래스를 제공합니다.메뉴 'ul'에 'pull-right'를 추가합니다.

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

..그 결과 메뉴 옵션이 드롭다운 버튼에 따라 오른쪽으로 정렬됩니다.

은 가간단방다추것음입다니는가하를 하는 것입니다.pull-left의 에대스에 .dropdown-submenu

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

jsfidle: DEMO

class 런급트.dropdown-submenu > .dropdown-menu갖고 있다left: 100%;따라서 왼쪽에서 하위 메뉴를 열려면 해당 설정을 왼쪽의 음수 위치로 재정의합니다.를 들어 를들면입니다.left: -95%;이제 왼쪽에 하위 메뉴가 나타나고 다른 설정을 조정하여 완벽한 미리 보기를 얻을 수 있습니다.

여기 DEMO 있습니다.

편집: OP의 질문과 저의 답변은 2012년 8월입니다.그러던 중 부트스트랩이 바뀌어서 이제 .pull-left 클래스가 생겼습니다.그때는 제 대답이 맞았습니다.이제 CSS를 수동으로 설정할 필요가 없습니다. .pull-left 클래스가 있습니다.

편집 2: 부트스트랩이 URL을 변경했기 때문에 데모가 작동하지 않습니다.jsfidle에서 외부 리소스를 변경하고 새 리소스로 교체하기만 하면 됩니다.

부트스트랩 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/ #http-messages

올바른 작업 방법은 다음과 같습니다.

/* 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(mac)
• 사파리(mac)

Javascript:

$(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">

이것이 당신에게 잘 되길 바랍니다.

ps. 사파리와 크롬의 작은 버그, 첫 번째 호버는 내가 그것을 고친다면 이 게시물을 업데이트할 것입니다.

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

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

사실 - 만약 당신이 부유하는 것이 괜찮다면.dropdown포장지 - 추가하는 것만큼 쉽다는 것을 알았습니다.navbar-right에게dropdown.

이것은 네이브바에 없기 때문에 커닝하는 것처럼 보이지만, 저에게는 잘 작동합니다.

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

그런 다음 다음 다음을 사용하여 부동을 추가로 사용자 지정할 수 있습니다.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
}

그러면 a를 이동합니다..dropdown-menu의 목적으로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-rightclass. 드롭다운 메뉴 위에 마우스를 놓으면 자동으로 왼쪽으로 당겨지며 아무것도 숨기지 않습니다. 모든 메뉴 텍스트가 표시됩니다.나는 어떤 커스텀 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%'> 

오른쪽에 표시할 메뉴를 선택합니다.

언급URL : https://stackoverflow.com/questions/12187554/how-to-make-twitter-bootstrap-submenu-to-open-on-the-left-side