Html 如何以水平方式而不是垂直方式显示引导导航栏的下拉菜单项？

我使用的是bootstrap4。在下拉部分中，下拉项垂直显示，即一个在另一个之下。I这些下拉项水平显示，即一个挨着另一个

<nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light">
            <a class="navbar-brand" href="index.html">Brand Name</a>
            <button class="navbar-toggler" 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>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
              <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                  <a class="nav-link" href="#">Home<span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item dropdown">
                  <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Dropdown
                  </a>
                  <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <a class="dropdown-item" href="#">Something else here</a>
                  </div>
                </li>                
              </ul>
            </div>
          </nav>

---

在上面的代码中，我希望具有“DropdownItem”类的元素一个接一个地显示。我使用了bootstrap网站4.3.1版中的上述代码。

我认为您必须覆盖

。下拉菜单

类的CSS。因此，不要直接覆盖这个类，而是提供一个自定义类，比如

.dd horizontal

，并在下面添加CSS

.dd-horizontal {
   display: flex;
}

---

此外，您还需要调整其他CSS道具。

您能告诉我您在这里遇到的问题是什么吗？非常感谢您在这方面的帮助。我还通过添加下拉菜单类的引导内容进行了进一步的更改。