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

huangapple
go评论100阅读模式
英文:

bg color no white in bootstrap

问题

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

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

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

我的完整代码：
MyCode

我的导航栏和下拉菜单：

  1. <nav class="navbar navbar-expand-lg bg-dark " data-bs-theme="dark">
  2.     <div class="container-fluid">
  3.         <a class="navbar-brand" href="#">Navbar</a>
  4.         <ul class="navbar-nav mb-3">
  5.             <li class="nav-item dropdown ">
  6.                 <a class="nav-link dropdown-toggle show" href="#" role="button" data-bs-toggle="dropdown"
  7.                     aria-expanded="true">
  8.                     <i class="bi bi-person-fill"></i>
  9.                 </a>
  10.                 <ul class="dropdown-menu dropdown-menu-end" data-bs-popper="static">
  11.                     <li><a class="dropdown-item " href="#">Action</a></li>
  12.                     <li><a class="dropdown-item" href="#">Another action</a></li>
  13.                     <li>
  14.                         <hr class="dropdown-divider">
  15.                     </li>
  16.                     <li><a class="dropdown-item" href="#">Something else here</a></li>
  17.                 </ul>
  18.             </li>
  19.         </ul>
  20.     </div>
  21. </nav>
  23. <ul class="navbar-nav mb-3">
  24.     <li class="nav-item dropdown ">
  25.         <a class="nav-link dropdown-toggle show" href="#" role="button" data-bs-toggle="dropdown"
  26.             aria-expanded="true">
  27.             <i class="bi bi-person-fill"></i>
  28.         </a>
  29.         <ul class="dropdown-menu " data-bs-popper="static">
  30.             <li><a class="dropdown-item " href="#">Action</a></li>
  31.             <li><a class="dropdown-item" href="#">Another action</a></li>
  32.             <li>
  33.                 <hr class="dropdown-divider">
  34.             </li>
  35.             <li><a class="dropdown-item" href="#">Something else here</a></li>
  36.         </ul>
  37.     </li>
  38. </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:

  1.        &lt;nav class=&quot;navbar navbar-expand-lg bg-dark &quot; data-bs-theme=&quot;dark&quot;&gt;
  2. &lt;div class=&quot;container-fluid&quot;&gt;
  3. &lt;a class=&quot;navbar-brand&quot; href=&quot;#&quot;&gt;Navbar&lt;/a&gt;
  4. &lt;ul class=&quot;navbar-nav  mb-3&quot;&gt;
  5. &lt;li class=&quot;nav-item dropdown &quot;&gt;
  6. &lt;a class=&quot;nav-link dropdown-toggle show&quot; href=&quot;#&quot; role=&quot;button&quot; data-bs-toggle=&quot;dropdown&quot;
  7. aria-expanded=&quot;true&quot;&gt;
  8. &lt;i class=&quot;bi bi-person-fill&quot;&gt;&lt;/i&gt;
  9. &lt;/a&gt;
  10. &lt;ul class=&quot;dropdown-menu dropdown-menu-end&quot; data-bs-popper=&quot;static&quot;&gt;
  11. &lt;li&gt;&lt;a class=&quot;dropdown-item &quot; href=&quot;#&quot;&gt;Action&lt;/a&gt;&lt;/li&gt;
  12. &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Another action&lt;/a&gt;&lt;/li&gt;
  13. &lt;li&gt;
  14. &lt;hr class=&quot;dropdown-divider&quot;&gt;
  15. &lt;/li&gt;
  16. &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Something else here&lt;/a&gt;&lt;/li&gt;
  17. &lt;/ul&gt;
  18. &lt;/li&gt;
  19. &lt;/ul&gt;
  20. &lt;/div&gt;
  21. &lt;/div&gt;
  22. &lt;/nav&gt;
  23. &lt;ul class=&quot;navbar-nav  mb-3&quot;&gt;
  24. &lt;li class=&quot;nav-item dropdown &quot;&gt;
  25. &lt;a class=&quot;nav-link dropdown-toggle show&quot; href=&quot;#&quot; role=&quot;button&quot; data-bs-toggle=&quot;dropdown&quot;
  26. aria-expanded=&quot;true&quot;&gt;
  27. &lt;i class=&quot;bi bi-person-fill&quot;&gt;&lt;/i&gt;
  28. &lt;/a&gt;
  29. &lt;ul class=&quot;dropdown-menu &quot; data-bs-popper=&quot;static&quot;&gt;
  30. &lt;li&gt;&lt;a class=&quot;dropdown-item &quot; href=&quot;#&quot;&gt;Action&lt;/a&gt;&lt;/li&gt;
  31. &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Another action&lt;/a&gt;&lt;/li&gt;
  32. &lt;li&gt;
  33. &lt;hr class=&quot;dropdown-divider&quot;&gt;
  34. &lt;/li&gt;
  35. &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Something else here&lt;/a&gt;&lt;/li&gt;
  36. &lt;/ul&gt;
  37. &lt;/li&gt;
  38. &lt;/ul&gt;

答案1

得分: 0

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

添加以下CSS：

  1. .navbar-nav .dropdown-menu {
  2.     background-color: white;
  3. }
  5. .navbar-nav .dropdown-item {
  6.     color: black;
  7. }
  9. .navbar-nav .dropdown-divider {
  10.     border-top: 1px solid black;
  11. }
  13. .navbar-nav .dropdown-item:hover {
  14.     background-color: lightgrey;
  15.     color: black;
  16. }

查看下面的代码片段：

  1. <!-- begin snippet: js hide: false console: true babel: false -->
  3. <!-- language: lang-css -->
  4. .navbar-nav .dropdown-menu {
  5.   background-color: white;
  6. }
  8. .navbar-nav .dropdown-item {
  9.   color: black;
  10. }
  12. .navbar-nav .dropdown-divider {
  13.   border-top: 1px solid black;
  14. }
  16. .navbar-nav .dropdown-item:hover {
  17.   background-color: lightgrey;
  18.   color: black;
  19. }
  21. <!-- language: lang-html -->
  22. <!DOCTYPE html>
  23. <html lang="en">
  25. <head>
  26.   <meta charset="UTF-8">
  27.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  28.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  29.   <title>Admin Dashboard</title>
  30.   <link rel="stylesheet" href="css/bootstrap.min.css">
  31.   <link rel="stylesheet" href="css/style.css">
  32.   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
  33.   <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">
  34. </head>
  36. <body>
  37.   <nav class="navbar navbar-expand-lg bg-dark ">
  38.     <div class="container-fluid">
  39.       <a class="navbar-brand" href="#">Navbar</a>
  40.       <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
  41.         <span class="navbar-toggler-icon"></span>
  42.       </button>
  43.       <div class="collapse navbar-collapse" id="navbarSupportedContent">
  44.         <form class="d-flex ms-auto">
  45.           <div class="input-group mb-3">
  46.             <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="button-addon2">
  47.             <button class="btn btn-outline-secondary" type="button" id="button-addon2"><i class="bi bi-search"></i></button>
  48.           </div>
  49.         </form>
  50.         <ul class="navbar-nav  mb-3">
  51.           <li class="nav-item dropdown ">
  52.             <a class="nav-link dropdown-toggle show" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="true">
  53.               <i class="bi bi-person-fill"></i>
  54.             </a>
  55.             <ul class="dropdown-menu dropdown-menu-end" data-bs-popper="static">
  56.               <li><a class="dropdown-item " href="#">Action</a></li>
  57.               <li><a class="dropdown-item" href="#">Another action</a></li>
  58.               <li>
  59.                 <hr class="dropdown-divider">
  60.               </li>
  61.               <li><a class="dropdown-item" href="#">Something else here</a></li>
  62.             </ul>
  63.           </li>
  64.         </ul>
  65.       </div>
  66.     </div>
  67.   </nav>
  68.   <ul class="navbar-nav  mb-3">
  69.     <li class="nav-item dropdown ">
  70.       <a class="nav-link dropdown-toggle show" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="true">
  71.         <i class="bi bi-person-fill"></i>
  72.       </a>
  73.       <ul class="dropdown-menu " data-bs-popper="static">
  74.         <li><a class="dropdown-item " href="#">Action</a></li>
  75.         <li><a class="dropdown-item" href="#">Another action</a></li>
  76.         <li>
  77.           <hr class="dropdown-divider">
  78.         </li>
  79.         <li><a class="dropdown-item" href="#">Something else here</a></li>
  80.       </ul>
  81.     </li>
  82.   </ul>
  83.   <script src="js/bootstrap.bundle.min.js"></script>
  84.   <script src="js/script.js"></script>
  85.   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
  86. </body>
  88. </html>
  90. <!-- 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:

  1. .navbar-nav .dropdown-menu {
  2. background-color: white;
  3. }
  4. .navbar-nav .dropdown-item {
  5. color: black;
  6. }
  7. .navbar-nav .dropdown-divider {
  8. border-top: 1px solid black;
  9. }
  10. .navbar-nav .dropdown-item:hover {
  11. background-color: lightgrey;
  12. color: black;
  13. }

See the snippet below.

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

<!-- language: lang-css -->

  1. .navbar-nav .dropdown-menu {
  2. background-color: white;
  3. }
  4. .navbar-nav .dropdown-item {
  5. color: black;
  6. }
  7. .navbar-nav .dropdown-divider {
  8. border-top: 1px solid black;
  9. }
  10. .navbar-nav .dropdown-item:hover {
  11. background-color: lightgrey;
  12. color: black;
  13. }

<!-- language: lang-html -->

  1. &lt;!DOCTYPE html&gt;
  2. &lt;html lang=&quot;en&quot;&gt;
  3. &lt;head&gt;
  4. &lt;meta charset=&quot;UTF-8&quot;&gt;
  5. &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
  6. &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
  7. &lt;title&gt;Admin Dashboard&lt;/title&gt;
  8. &lt;link rel=&quot;stylesheet&quot; href=&quot;css/bootstrap.min.css&quot;&gt;
  9. &lt;link rel=&quot;stylesheet&quot; href=&quot;css/style.css&quot;&gt;
  10. &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css&quot;&gt;
  11. &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;
  12. &lt;/head&gt;
  13. &lt;body&gt;
  14. &lt;nav class=&quot;navbar navbar-expand-lg bg-dark &quot; data-bs-theme=&quot;dark&quot;&gt;
  15. &lt;div class=&quot;container-fluid&quot;&gt;
  16. &lt;a class=&quot;navbar-brand&quot; href=&quot;#&quot;&gt;Navbar&lt;/a&gt;
  17. &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;
  18. &lt;span class=&quot;navbar-toggler-icon&quot;&gt;&lt;/span&gt;
  19. &lt;/button&gt;
  20. &lt;div class=&quot;collapse navbar-collapse&quot; id=&quot;navbarSupportedContent&quot;&gt;
  21. &lt;form class=&quot;d-flex ms-auto&quot;&gt;
  22. &lt;div class=&quot;input-group mb-3&quot;&gt;
  23. &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;
  24. &lt;button class=&quot;btn btn-outline-secondary&quot; type=&quot;button&quot; id=&quot;button-addon2&quot;&gt;&lt;i
  25. class=&quot;bi bi-search&quot;&gt;&lt;/i&gt;&lt;/button&gt;
  26. &lt;/div&gt;
  27. &lt;/form&gt;
  28. &lt;ul class=&quot;navbar-nav  mb-3&quot;&gt;
  29. &lt;li class=&quot;nav-item dropdown &quot;&gt;
  30. &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;
  31. &lt;i class=&quot;bi bi-person-fill&quot;&gt;&lt;/i&gt;
  32. &lt;/a&gt;
  33. &lt;ul class=&quot;dropdown-menu dropdown-menu-end&quot; data-bs-popper=&quot;static&quot;&gt;
  34. &lt;li&gt;&lt;a class=&quot;dropdown-item &quot; href=&quot;#&quot;&gt;Action&lt;/a&gt;&lt;/li&gt;
  35. &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Another action&lt;/a&gt;&lt;/li&gt;
  36. &lt;li&gt;
  37. &lt;hr class=&quot;dropdown-divider&quot;&gt;
  38. &lt;/li&gt;
  39. &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Something else here&lt;/a&gt;&lt;/li&gt;
  40. &lt;/ul&gt;
  41. &lt;/li&gt;
  42. &lt;/ul&gt;
  43. &lt;/div&gt;
  44. &lt;/div&gt;
  45. &lt;/nav&gt;
  46. &lt;ul class=&quot;navbar-nav  mb-3&quot;&gt;
  47. &lt;li class=&quot;nav-item dropdown &quot;&gt;
  48. &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;
  49. &lt;i class=&quot;bi bi-person-fill&quot;&gt;&lt;/i&gt;
  50. &lt;/a&gt;
  51. &lt;ul class=&quot;dropdown-menu &quot; data-bs-popper=&quot;static&quot;&gt;
  52. &lt;li&gt;&lt;a class=&quot;dropdown-item &quot; href=&quot;#&quot;&gt;Action&lt;/a&gt;&lt;/li&gt;
  53. &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Another action&lt;/a&gt;&lt;/li&gt;
  54. &lt;li&gt;
  55. &lt;hr class=&quot;dropdown-divider&quot;&gt;
  56. &lt;/li&gt;
  57. &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Something else here&lt;/a&gt;&lt;/li&gt;
  58. &lt;/ul&gt;
  59. &lt;/li&gt;
  60. &lt;/ul&gt;
  61. &lt;script src=&quot;js/bootstrap.bundle.min.js&quot;&gt;&lt;/script&gt;
  62. &lt;script src=&quot;js/script.js&quot;&gt;&lt;/script&gt;
  63. &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;
  64. &lt;/body&gt;
  65. &lt;/html&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年5月21日 21:32:22
  • 转载请务必保留本文链接：https://go.coder-hub.com/76300165.html
  • bootstrap-5
  • css
  • html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定