부트 스트랩 4 모바일 메뉴의 하위 메뉴 관리?

BS 3.3.7 사이트를 4로 포팅합니다. nav가 포함 된 헤더가 있으며 일부 항목은 드롭 다운 항목 (메뉴)입니다. 부트 스트랩 4 모바일 메뉴의 하위 메뉴 관리?

<header> 
    <nav class="navbar fixed-top navbar-expand-lg navbar-light bg-white bg-pb-header-gradient"> 
    <button class="navbar-toggler p-0" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" 
    aria-expanded="false" aria-label="Toggle navigation"> 
     <span class="navbar-toggler-icon"></span> 
    </button> 
    <a class="navbar-brand" href="" routerLink="/home"> 
     <img src="/assets/images/pb-header-mark.svg" width="32" height="31" class="d-inline-block align-top" alt=""> Design System 
    </a> 

<div class="collapse navbar-collapse" id="navbarSupportedContent"> 
    <ul class="navbar-nav mr-auto"> 
    <li class="nav-item"> 
     <a class="nav-link" routerLink="/home">Home</a> 
    </li> 
    ... etc ...

나는이 오버라이드 (override)의 최소 모바일에서 작동하도록 노력하고 있어요. 가장 먼저 알아 낸 점은 최상위 항목 (여기서는 "홈" "기초"및 "웹")이 머리글에 포함되어 있으므로 그라디언트의 배경 크기를 설정해야 "메뉴"가 표시되지 않습니다. 그라데이션 배경이 있습니다