如何在Bootstrap中更改下拉菜单的背景颜色

Question

请问有人能帮我找出问题吗？

这是我的代码：

<div class="dropdown">//I used Bootstrap
 <button class="btn btn-primary dropdown-toggle" onClick="myFunction()" onMouseOver="showlinks()" type="button" data-toggle="dropdown" style="border-radius:15px 0px 15px 0px; background-color:transparent; border-color:grey">Menu                
<span class="caret">
   </span>
  </button>
  <ul class="dropdown-menu">
     <li><a href="#">Login</a></li>
     <li><a href="#">Contact Us</a></li>
  </ul>
 </div>

- Jasbir Singh

---

请您能否接受修改请求。因为您的代码没有完全显示。我们只有在点击编辑时才能看到。 - Raviteja

Answer 1

首先，确保在任何自定义 CSS 文件之前引用你的 bootstrap.css 文件。然后，可以通过更具体的父/子选择器来覆盖 Bootstrap 的样式，以确保你的样式覆盖 Bootstrap 的样式，例如：

CSS：

.header .top-nav ul.dropdown-menu {
  background-color: #000;
}

Fiddle: https://jsfiddle.net/mmcjLxsw/

编辑：FYI - 用这种方式可以确保您不必使用!important，这可能会使元素样式脱离文档布局的级联流程。

- David Wilkinson

Answer 2

请在按钮中删除 background-color:transparent

HTML

    <div class="dropdown">
        <button class="btn btn-primary dropdown-toggle" onClick="myFunction()" onMouseOver="showlinks()" type="button"ata-toggle="dropdown"style="border-radius:15px 0px 15px 0px; border-color:#fff">Menu                
    <span class="caret">
    </span>
        </button>
            <ul class="dropdown-menu">
                <li><a href="#">Login</a></li>
                <li><a href="#">Contact Us</a></li>
            </ul>
     </div>

CSS

.dropdown ul li
 {
   background-color:#000;
  }

.btn-primary
 {
  color:#fff;
 } 
.btn-primary:hover
{
  background:#003259;
  color:#fff;
}

- Vignesh V

Answer 3

如果您想快速更改，请尝试以下代码：<ul class="dropdown-menu" style="background-color:#000000!important;" > 当您更改背景时，您需要更改文本颜色，因此如果需要，请添加此代码！重要提示：color:#ffffff!important;

- Mark Fortez

---

请不要使用!important，这是最糟糕的做法。 - Enrique Quero

@EnriqueQuero - 我完全同意...我尽可能地避免使用!important... - David Wilkinson

所以按下Ctrl + F并键入dropdown-menu，您将找到该类并进行编辑。 - Mark Fortez

但是如果你不能编辑css，因为它是example.min.css，你可以在这个网站上解压缩css http://mrcoles.com/blog/css-unminify/，使其易于编辑。 - Mark Fortez