在 Bootstrap 4 移动菜单上管理子菜单？答案

【问题标题】：Managing submenus on Bootstrap 4 mobile menu?在 Bootstrap 4 移动菜单上管理子菜单？
【发布时间】：2018-04-05 11:18:39
【问题描述】：

我正在将我们的 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 ...

我正在尝试以最少的覆盖使其在移动设备上运行。我注意到的第一件事是顶级项目（这里是“主页”“基础”和“网络”）是标题的一部分，所以我必须为渐变设置背景大小，这样“菜单”就不会有渐变背景：

很好，但现在“web”下的下拉菜单的样式类似于下拉菜单：

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

【问题讨论】：

标签： html css twitter-bootstrap bootstrap-4

【解决方案1】：

这是默认行为，您可以在文档中查看是否将浏览器调整为移动设备大小：https://getbootstrap.com/docs/4.0/components/navbar/#supported-content

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

【讨论】：