Question

是否可以在引导程序的同一导航类中具有多个下拉菜单，而无需将每个菜单项放在单独的div中？

发生的事情是，当我单击下拉菜单时，每次都会打开相同的下拉菜单（我有两个分别用于两个单独菜单项的下拉菜单）

我尝试使用数据目标仅打开具有特定ID的下拉菜单，但这会返回控制台错误。

  <nav>
      <a>Menu item 1</a>
      <a>Menu item 2</a>
      <a class="dropdown dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Menu item 3(dropdown menu 1)</a>
        <div class="dropdown-menu" aria-labelledby="dropdown">
          <a class="dropdown-item" href="/">dropdown item 1</a>     
        </div>


      <a class="dropdown dropdown-toggle" href="#" style= "display:none;" id="certdropdown" data-toggle="dropdown" data-target="#dropdown2" aria-haspopup="true" aria-expanded="false">Menu item 3 ( dropdown menu 2)</a>
      <div class="dropdown-menu" aria-labelledby="dropdown" id ="dropdown2">
          <a class="dropdown-item" href="/">dropdown item 1</a>     
        </div></nav>

如果我在单独的div中将两个菜单项都分开，则可以，但是我的CSS毁了

Answer 1

否，在同一div中不可能有两个下拉菜单。由于要切换它们的代码会在按钮/锚的父div中查找第一个元素，因此需要将它们分开。因此，如果它们在同一个父div中，则只会切换第一个。

由于您还没有提供CSS的哪一部分被破坏，我想您可能会遇到两个问题。

下拉按钮将包装到下一行。
您正在通过执行nav > a选择导航内的链接，而忽略了<div class="dropdown"></div>内的链接，或者正在通过nav a选择导航内的链接，其中包括下拉菜单中的链接。

第一个解决方案：

如果您的下拉按钮/链接位于它们自己的行上，那是因为它们的显示值为block。将类d-inline添加到<div class="dropdown">来解决此问题。

第二个解决方案：

使用以下代码在nav中选择链接并设置其样式：

nav a:not(.dropdown-item) {
  // styling
}

这将忽略下拉菜单中的链接，但设置所有其他链接的样式。

如果您的CSS遇到其他问题，请解释一下它是什么，我会尽力帮助您。

Answer 2

建议here看起来不错。本质上，您需要使用btn-group，如this example and just above it in the docs所示。

使用无显示样式的代码，并从第二个下拉列表中删除不必要的ID：

<nav>
  <a>Menu item 1</a>
  <a>Menu item 2</a>

  <div class="btn-group">
    <a class="dropdown dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Menu item 3(dropdown menu 1)
    </a>
    <div class="dropdown-menu" aria-labelledby="dropdown">
      <a class="dropdown-item" href="/">dropdown item 1</a>     
    </div>
  </div>

  <div class="btn-group">
    <a class="dropdown dropdown-toggle" href="#" id="certdropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Menu item 3 ( dropdown menu 2)
    </a>
    <div class="dropdown-menu" aria-labelledby="dropdown">
      <a class="dropdown-item" href="/">dropdown item 1</a>     
    </div>
  </div>
</nav>

您可以阅读更多specifics about button groups here。

同一div类中的多个Bootstrap下拉列表

2 个答案: