Untermenüs im Bootstrap 4-Menü verwalten?

Question

Ich portiere unsere BS 3.3.7 Seite auf 4. Wir haben eine Kopfzeile mit einem Nav darin, einige Elemente sind Dropdown-Elemente (Menüs).

<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 ... 

Ich versuche, dies zu Mobile mit einem Minimum an Überschreibungen zur Arbeit zu kommen. Das erste, was mir aufgefallen ist, ist, dass die Elemente der obersten Ebene (hier "Home" "Fundamentals" und "Web") Teil der Kopfzeile sind, also musste ich eine Hintergrundgröße für den Farbverlauf einstellen, so dass das "Menü" nicht funktioniert einen Gradienten Hintergrund:

Feine aber jetzt das Drop-Down-Menü unter "Web" ist wie ein Drop-Down-Stil:

gibt es für diese keine Überschreibung Einbau- ? Es scheint, dass dies ein sehr häufiges Muster für Header-Menüs ist, die in ein mobiles Menü gehen müssen.

Answer 1

Das ist das Standardverhalten ist, wie Sie sehen können, wenn Sie Ihren Browser auf Mobile Größe auf der Dokumentation der Größe: https://getbootstrap.com/docs/4.0/components/navbar/#supported-content

Wenn Sie dies ändern wollen, müssen Sie individuellen Styling benötigen, CSS-Medienabfragen verwenden.