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