管理Bootstrap 4移动菜单上的子菜单？

Question

我将我们的BS 3.3.7网站移植到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 ...

我正在尝试使用最少的覆盖功能在Mobile上运行此功能。我注意到的第一件事是顶级项目（这里是“Home”“Fundamentals”和“Web”）是标题的一部分，所以我不得不为渐变设置背景大小，所以“菜单”不会有渐变背景：

很好，但现在“网络”下的下拉菜单的样式就像下拉列表一样：

这没有内置覆盖吗？对于必须进入移动菜单的标题菜单来说，这似乎是一种非常常见的模式。

Answer 1

这是默认行为，因为您可以看到在论坛中将浏览器的大小调整为移动设备尺寸：https://getbootstrap.com/docs/4.0/components/navbar/#supported-content

如果你想改变它，你需要使用CSS媒体查询来定制样式。