부트 스트랩 4 드롭 다운 사용 맞춤 컨테이너

Question

부트 스트랩 4 드롭 다운을 기반으로 메가 메뉴를 구축 중입니다.

사용자 설정 컨테이너 (예 : <div class="dropdown-container">)를 사용하여 드롭 다운 콘텐츠를 표시하거나 숨 깁니다. 부트 스트랩 <div class="dropdown-menu">을 사용하는 대신.

Megamenu를 위치 지정하면 <div class="dropdown-menu">을 사용할 때 부트 스트랩에 의해 style="position: absolute; transform: translate3d(0px, 38px, 0px); top: 0px; left: 0px; will-change: transform;"이 추가되어 문제가 발생합니다.

내가 시도 :

$('li.dropdown').click(function() { 
    $('.dropdown-container').toggleClass('show') 
    }); 

하지만 그것은 보여주는 아니에요 다른 메뉴 항목을 클릭 할 때/더 이상 숨어?

이것은 마크 업입니다.

<li class="nav-item expanded dropdown dropdown-megamenu"> 
      <a href="/test" class="nav-link dropdown-toggle" data-target="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">MegaMenu test link <span class="caret"></span></a> 
    <div class="dropdown-container"> 
    <!-- Dropdown Megamenu content --> 
    </div> 
    </li> 
    <li class="nav-item expanded dropdown dropdown-megamenu"> 
      <a href="/test" class="nav-link dropdown-toggle" data-target="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">MegaMenu test link two<span class="caret"></span></a> 
    <div class="dropdown-container"> 
    <!-- Dropdown Megamenu content two --> 
    </div> 
    </li> 

Answer 1

나는 첨부 내 클래스 다음 CSS와 dropdown-menu 클래스 megamenu :

.megamenu { 
    width: 100%; 
    transform: translate3d(0px, 70px, 0px) !important; 
    padding: 30px; 
    a { 
    padding: 0; 
    } 
} 

편집 : 밝혀, 부트 스트랩 임의로 여부 부모를 기반으로 PopperJS 스타일을 적용할지 여부를 결정합니다 요소는 navbar 클래스입니다. this 문제

보기