在 Bootstrap 4 中与下拉菜单项在同一行插入链接答案

【问题标题】：Insert link on same line as dropdown menu item in Bootstrap 4在 Bootstrap 4 中与下拉菜单项在同一行插入链接
【发布时间】：2023-03-19 19:41:01
【问题描述】：

我希望下拉菜单项有一个单独的链接指向“这是什么？”选项。上一个问题针对 bootstrap3 对此进行了研究，它使用 html 列表语法进行下拉菜单（<li> 等）：
bootstrap dropdown menu Two links on same horizontal row

下拉菜单的语法现在不同了（稍微简化了）：

<div class="dropdown">
  <button class="btn"> Dropdown button</button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action 1</a>
    <a class="dropdown-item" href="#">Action 2</a>
    <a class="dropdown-item" href="#">Action 3</a>
  </div>
</div>

在这种情况下，假设我想在下拉菜单项之一的右侧插入另一个链接（例如，操作 2）？

<a href = "#">What's this?</a>

这张图片显示了我所追求的：

请注意，我并不想在此下拉项中插入额外的下拉菜单：我只想要一个指向下拉项 2 右侧的简单链接。

当我尝试在操作 2 之后插入此时，它只是变成了单独的一行。显然我不能将它嵌套在锚点内（我只是为了好玩而尝试它，链接/文本出现但什么也不做，正如预期的那样）。

【问题讨论】：

标签： bootstrap-4

【解决方案1】：

将dropdown-item 设为 DIV 并在其中放入 2 个链接...

https://www.codeply.com/go/MzI65YRv7Q

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action 1</a>
    <div class="dropdown-item" href="#">
        <a class="text-dark" href="#1">Action 2</a>
        <a class="" href="#2">[what's this?]</a>
    </div>
    <a class="dropdown-item" href="#">Action 3</a>
  </div>
</div>

【讨论】：

这是一个很好的答案：优雅而简单。我建议对您的答案进行一个调整，我将其放入代码中：主要项目文本带有悬停下划线，这不是下拉项目的标准行为；我刚刚添加了style = "text-decoration:none;"，所以现在它与所有其他项目的行为完美匹配！（我还将课程更改为text-white，但这是一个小细节，取决于您特定的 bs 风格，每个人显然都需要自己弄清楚:)。