Bootstrap 下拉背景颜色

Posted 2023-03-27

【中文标题】Bootstrap 下拉背景颜色

【英文标题】：Bootstrap Dropdown background color

【发布时间】：2020-03-07 06:46:49

【问题描述】：

我正在尝试在导航栏中创建一个与导航栏其余部分的样式相匹配的下拉列表。据我所知，我没有覆盖任何引导类，我想知道是否有任何类具有与下拉列表相同的样式。

我一直在浏览其他文章，大多数似乎只是使用随机类并且它可以正常工作。我尝试为其创建自定义 CSS 类，但无法成功匹配标题。

<li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Management
    </a>
    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
       <a class="dropdown-item" href="@Url.Action("Index", "Management")">Statistics</a>
       <br />
       <a class="dropdown-item" href="@Url.Action("Index", "Production")">Production Lines</a>
       <br />
       <a class="dropdown-item" href="@Url.Action("Index", "Announcement")">Announcements</a>
       <br />
       <a class="dropdown-item" href="@Url.Action("Index", "TestStation")">Test Stations</a>
    </div>
</li>

在创建下拉列表时，是否有一个与导航栏匹配的特殊类可以使用，还是我必须创建一个自定义类？

【参考方案1】：

bootstrap 中的dropdown-item 背景颜色是白色的，如果你想改变它，你可以在你的页面样式中改变它。您可以将此代码添加到您的 head 标签中：

.dropdown-item
background-color: #2e89e5;
color: #fff;
 

【讨论】：

我尝试了您的解决方案，它在某种程度上有效。它改变了 TEXT 的背景，但没有改变下拉列表的其余部分。我想知道您是否也知道如何更改其余背景的颜色。

是的。有一种简单的方法可以更改每种引导页面样式的颜色。在您的浏览器中右键单击您的标签并单击检查元素，然后在样式布局的右侧更改您需要的每个元素的颜色，然后创建一个样式，例如 .dropdown-item 并将检查器中的代码粘贴到您的代码中。

谢谢！我正准备做一些内联 CSS 来设置菜单的背景颜色，如果我出于某种原因把它放在标题中就不会了。然后我不得不为每个链接做更多的内联 CSS 来将它们的颜色设置为白色。

【参考方案2】：

假设您的导航栏使用原色，您可以将bg-primary 类赋予下拉菜单以赋予其原色背景 (https://getbootstrap.com/docs/4.0/utilities/colors/#background-color)

您可能必须将此类单独分配给所有 ul 项目

【讨论】：

<a class="p-3 mb-2 bg-primary text-white" href="@Url.Action("Index", "Management")">Statistics</a> 我尝试根据提供的链接进行修复。与 Majid 的建议类似，它只更改了 TEXT 的背景，而不是整个下拉列表。如果我错误地实现了链接中的内容，您能否提供一个示例？

【参考方案3】：

在引导程序 4.1.3 的样式表中更改 .dropdown-menu 类的样式。