2023年5月21日 21:32:22go评论56阅读模式

英文:

bg color no white in bootstrap

问题

I understand your request. Here's the translated content:

当我在深色导航栏中使用 Bootstrap 5 的下拉菜单时，下拉菜单的背景是黑色的，但在导航栏之外使用时，下拉菜单的背景是白色的，为什么？

我想在深色导航栏中使用白色下拉菜单。

我的完整代码：
MyCode

我的导航栏和下拉菜单：

<nav class="navbar navbar-expand-lg bg-dark " data-bs-theme="dark">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">Navbar</a>
        <ul class="navbar-nav mb-3">
            <li class="nav-item dropdown ">
                <a class="nav-link dropdown-toggle show" href="#" role="button" data-bs-toggle="dropdown"
                    aria-expanded="true">
                    <i class="bi bi-person-fill"></i>
                </a>
                <ul class="dropdown-menu dropdown-menu-end" data-bs-popper="static">
                    <li><a class="dropdown-item " href="#">Action</a></li>
                    <li><a class="dropdown-item" href="#">Another action</a></li>
                    <li>
                        <hr class="dropdown-divider">
                    </li>
                    <li><a class="dropdown-item" href="#">Something else here</a></li>
                </ul>
            </li>
        </ul>
    </div>
</nav>

<ul class="navbar-nav mb-3">
    <li class="nav-item dropdown ">
        <a class="nav-link dropdown-toggle show" href="#" role="button" data-bs-toggle="dropdown"
            aria-expanded="true">
            <i class="bi bi-person-fill"></i>
        </a>
        <ul class="dropdown-menu " data-bs-popper="static">
            <li><a class="dropdown-item " href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li>
                <hr class="dropdown-divider">
            </li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
        </ul>
    </li>
</ul>

请注意，此翻译仅包括代码的翻译部分，不包括回答问题的内容。

英文:

when i use bootstrap5 dropdown in bg-dark navbar, dropdown background is black but use it the outside of navbar, dropdown background is white why?<br>
i want to use white dropdown in dark navbar.<br>
my complete code:
MyCode

my navbar & dropdown:

       &lt;nav class=&quot;navbar navbar-expand-lg bg-dark &quot; data-bs-theme=&quot;dark&quot;&gt;
&lt;div class=&quot;container-fluid&quot;&gt;
&lt;a class=&quot;navbar-brand&quot; href=&quot;#&quot;&gt;Navbar&lt;/a&gt;
&lt;ul class=&quot;navbar-nav  mb-3&quot;&gt;
&lt;li class=&quot;nav-item dropdown &quot;&gt;
&lt;a class=&quot;nav-link dropdown-toggle show&quot; href=&quot;#&quot; role=&quot;button&quot; data-bs-toggle=&quot;dropdown&quot;
aria-expanded=&quot;true&quot;&gt;
&lt;i class=&quot;bi bi-person-fill&quot;&gt;&lt;/i&gt;
&lt;/a&gt;
&lt;ul class=&quot;dropdown-menu dropdown-menu-end&quot; data-bs-popper=&quot;static&quot;&gt;
&lt;li&gt;&lt;a class=&quot;dropdown-item &quot; href=&quot;#&quot;&gt;Action&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Another action&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;
&lt;hr class=&quot;dropdown-divider&quot;&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Something else here&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/nav&gt;
&lt;ul class=&quot;navbar-nav  mb-3&quot;&gt;
&lt;li class=&quot;nav-item dropdown &quot;&gt;
&lt;a class=&quot;nav-link dropdown-toggle show&quot; href=&quot;#&quot; role=&quot;button&quot; data-bs-toggle=&quot;dropdown&quot;
aria-expanded=&quot;true&quot;&gt;
&lt;i class=&quot;bi bi-person-fill&quot;&gt;&lt;/i&gt;
&lt;/a&gt;
&lt;ul class=&quot;dropdown-menu &quot; data-bs-popper=&quot;static&quot;&gt;
&lt;li&gt;&lt;a class=&quot;dropdown-item &quot; href=&quot;#&quot;&gt;Action&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Another action&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;
&lt;hr class=&quot;dropdown-divider&quot;&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Something else here&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;

答案1

得分: 0

将Bootstrap类bg-dark添加到navbar时，Bootstrap会自适应所有其他元素，以确保用户体验（即用户体验）尽可能好。为什么？如果你有一个深灰色的导航栏，但下拉菜单是白色的，这两种颜色之间的对比太大。然而，如果你希望在深灰色导航栏中有一个白色的下拉菜单，你可以这样做。

添加以下CSS：

.navbar-nav .dropdown-menu {
    background-color: white;
}

.navbar-nav .dropdown-item {
    color: black;
}

.navbar-nav .dropdown-divider {
    border-top: 1px solid black;
}

.navbar-nav .dropdown-item:hover {
    background-color: lightgrey;
    color: black;
}

查看下面的代码片段：

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->
.navbar-nav .dropdown-menu {
  background-color: white;
}

.navbar-nav .dropdown-item {
  color: black;
}

.navbar-nav .dropdown-divider {
  border-top: 1px solid black;
}

.navbar-nav .dropdown-item:hover {
  background-color: lightgrey;
  color: black;
}

<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Admin Dashboard</title>
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
</head>

<body>
  <nav class="navbar navbar-expand-lg bg-dark ">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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">
        <form class="d-flex ms-auto">
          <div class="input-group mb-3">
            <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="button-addon2">
            <button class="btn btn-outline-secondary" type="button" id="button-addon2"><i class="bi bi-search"></i></button>
          </div>
        </form>
        <ul class="navbar-nav  mb-3">
          <li class="nav-item dropdown ">
            <a class="nav-link dropdown-toggle show" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="true">
              <i class="bi bi-person-fill"></i>
            </a>
            <ul class="dropdown-menu dropdown-menu-end" data-bs-popper="static">
              <li><a class="dropdown-item " href="#">Action</a></li>
              <li><a class="dropdown-item" href="#">Another action</a></li>
              <li>
                <hr class="dropdown-divider">
              </li>
              <li><a class="dropdown-item" href="#">Something else here</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  <ul class="navbar-nav  mb-3">
    <li class="nav-item dropdown ">
      <a class="nav-link dropdown-toggle show" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="true">
        <i class="bi bi-person-fill"></i>
      </a>
      <ul class="dropdown-menu " data-bs-popper="static">
        <li><a class="dropdown-item " href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li>
          <hr class="dropdown-divider">
        </li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
      </ul>
    </li>
  </ul>
  <script src="js/bootstrap.bundle.min.js"></script>
  <script src="js/script.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
</body>

</html>

<!-- end snippet -->

希望这些翻译对你有帮助。如果有其他问题，请随时提出。

英文:

When you add the Bootstrap class bg-dark to the navbar, Bootstrap adapts all other elements so that the UX (i.e., user experience) is the best possible. Why? If you have a dark gray navbar but the dropdown is white, there's too much contrast between these two colors. However, you can have a white dropdown in a dark gray navbar if you want.

Add the following CSS:

.navbar-nav .dropdown-menu {
background-color: white;
}
.navbar-nav .dropdown-item {
color: black;
}
.navbar-nav .dropdown-divider {
border-top: 1px solid black;
}
.navbar-nav .dropdown-item:hover {
background-color: lightgrey;
color: black;
}

See the snippet below.

.navbar-nav .dropdown-menu {
background-color: white;
}
.navbar-nav .dropdown-item {
color: black;
}
.navbar-nav .dropdown-divider {
border-top: 1px solid black;
}
.navbar-nav .dropdown-item:hover {
background-color: lightgrey;
color: black;
}

&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
&lt;meta charset=&quot;UTF-8&quot;&gt;
&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
&lt;title&gt;Admin Dashboard&lt;/title&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;css/bootstrap.min.css&quot;&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;css/style.css&quot;&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css&quot;&gt;
&lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; integrity=&quot;sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ&quot; crossorigin=&quot;anonymous&quot;&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;nav class=&quot;navbar navbar-expand-lg bg-dark &quot; data-bs-theme=&quot;dark&quot;&gt;
&lt;div class=&quot;container-fluid&quot;&gt;
&lt;a class=&quot;navbar-brand&quot; href=&quot;#&quot;&gt;Navbar&lt;/a&gt;
&lt;button class=&quot;navbar-toggler&quot; type=&quot;button&quot; data-bs-toggle=&quot;collapse&quot; data-bs-target=&quot;#navbarSupportedContent&quot; aria-controls=&quot;navbarSupportedContent&quot; aria-expanded=&quot;false&quot; aria-label=&quot;Toggle navigation&quot;&gt;
&lt;span class=&quot;navbar-toggler-icon&quot;&gt;&lt;/span&gt;
&lt;/button&gt;
&lt;div class=&quot;collapse navbar-collapse&quot; id=&quot;navbarSupportedContent&quot;&gt;
&lt;form class=&quot;d-flex ms-auto&quot;&gt;
&lt;div class=&quot;input-group mb-3&quot;&gt;
&lt;input type=&quot;text&quot; class=&quot;form-control&quot; placeholder=&quot;Recipient&#39;s username&quot; aria-label=&quot;Recipient&#39;s username&quot; aria-describedby=&quot;button-addon2&quot;&gt;
&lt;button class=&quot;btn btn-outline-secondary&quot; type=&quot;button&quot; id=&quot;button-addon2&quot;&gt;&lt;i
class=&quot;bi bi-search&quot;&gt;&lt;/i&gt;&lt;/button&gt;
&lt;/div&gt;
&lt;/form&gt;
&lt;ul class=&quot;navbar-nav  mb-3&quot;&gt;
&lt;li class=&quot;nav-item dropdown &quot;&gt;
&lt;a class=&quot;nav-link dropdown-toggle show&quot; href=&quot;#&quot; role=&quot;button&quot; data-bs-toggle=&quot;dropdown&quot; aria-expanded=&quot;true&quot;&gt;
&lt;i class=&quot;bi bi-person-fill&quot;&gt;&lt;/i&gt;
&lt;/a&gt;
&lt;ul class=&quot;dropdown-menu dropdown-menu-end&quot; data-bs-popper=&quot;static&quot;&gt;
&lt;li&gt;&lt;a class=&quot;dropdown-item &quot; href=&quot;#&quot;&gt;Action&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Another action&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;
&lt;hr class=&quot;dropdown-divider&quot;&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Something else here&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/nav&gt;
&lt;ul class=&quot;navbar-nav  mb-3&quot;&gt;
&lt;li class=&quot;nav-item dropdown &quot;&gt;
&lt;a class=&quot;nav-link dropdown-toggle show&quot; href=&quot;#&quot; role=&quot;button&quot; data-bs-toggle=&quot;dropdown&quot; aria-expanded=&quot;true&quot;&gt;
&lt;i class=&quot;bi bi-person-fill&quot;&gt;&lt;/i&gt;
&lt;/a&gt;
&lt;ul class=&quot;dropdown-menu &quot; data-bs-popper=&quot;static&quot;&gt;
&lt;li&gt;&lt;a class=&quot;dropdown-item &quot; href=&quot;#&quot;&gt;Action&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Another action&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;
&lt;hr class=&quot;dropdown-divider&quot;&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Something else here&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;script src=&quot;js/bootstrap.bundle.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;js/script.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js&quot; integrity=&quot;sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

Bootstrap中没有白色的背景颜色。

问题

答案1

如何使用Tailwindcss防止CSS列换行

有没有更简单的方法通过HTML按钮在Node.js中调用JS函数？

在JavaScript中，是否有一种简短的代码来更改多个ID的CSS样式？

如何使嵌套的
占用可用高度？

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论