如何删除下拉切换按钮和下拉菜单元素之间的空格？答案

【问题标题】：How can I remove the space between the dropdown-toggle button and dropdown-menu elements?如何删除下拉切换按钮和下拉菜单元素之间的空格？
【发布时间】：2023-02-23 02:42:38
【问题描述】：

为什么下拉切换按钮和下拉菜单之间有空格？如何删除这个空格？ box-shadow 隐藏了空间，但是当 box-shadow 被移除时，你可以很容易地看到空间。这是代码：

<!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" />
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
        <style>
          .btn, button {
            box-shadow: none !important;
          }
        </style>
        <title>Document</title>
    </head>
    <body>
        <div class="container">
            <div class="dropdown">
                <button
                    class="btn btn-secondary dropdown-toggle"
                    type="button"
                    id="dropdownMenuButton1"
                    data-bs-toggle="dropdown"
                    aria-expanded="false"
                >
                    Dropdown button
                </button>
                <ul class="dropdown-menu" style="vertical-align: top;" aria-labelledby="dropdownMenuButton1">
                    <li><a class="dropdown-item" href="#">Action</a></li>
                    <li>
                        <a class="dropdown-item" href="#">Another action</a>
                    </li>
                    <li>
                        <a class="dropdown-item" href="#"
                            >Something else here</a
                        >
                    </li>
                </ul>
            </div>
        </div><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

    </body>
</html>

编辑：编辑了 css 代码，使空间更容易可见

【问题讨论】：

this 是否回答了您的问题？
我的问题出现在桌面，而不是移动
当我检查网页时，我看到引导程序将位置和转换添加到下拉菜单。我没有找到任何可以包含这个的 css。所以我想这是因为javascript而发生的......
这只是 Bootstrap 团队的设计选择。你想解决什么问题？与其问他们为什么这样做（没有人确切知道），不如问问你的问题。
我问了我的问题，阅读了问题。我没有问为什么 bootstrap 在下拉菜单和下拉切换之间留一个空格，我问的是如何删除空格......

标签： html css bootstrap-5

【解决方案1】：

要消除切换元素和下拉列表之间的间隙，请应用此 CSS。在极少数情况下，使用 !important 似乎是合适的，因为原始样式是由 Bootstrap 脚本内联应用的。

可选地应用一些边界半径覆盖以在打开时以视觉方式组合元素。

.dropdown-menu {
  transform: translate3d(0px, 38px, 0px) !important;
}

/* optional */
body .dropdown-toggle.show {
  border-radius: .25rem .25rem 0 0;
}

body .dropdown-menu {
  border-radius: 0 .25rem .25rem .25rem;
}
/* end optional */

.btn,
button {
  box-shadow: none !important;
}

<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>

<body>
  <div class="container">
    <div class="dropdown">
      <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
          Dropdown button
      </button>

      <ul class="dropdown-menu" style="vertical-align: top;" aria-labelledby="dropdownMenuButton1">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li>
          <a class="dropdown-item" href="#">Another action</a>
        </li>
        <li>
          <a class="dropdown-item" href="#">Something else here</a> </li>
      </ul>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

</body>

【讨论】：

【解决方案2】：

 .dropdown-menu.show {
    transform: translate(0px, 40px);
}

这就是当您单击切换按钮时将菜单向下推的原因

【讨论】：

是的，我知道。但我不知道如何删除它。
你不能删除它（我想添加一个带有 JS 的点击侦听器并删除类会起作用，但它在这里确实是一个坏主意），它是默认的 Bootstrap。只需编写自己的 CSS 即可消除差距
我试图编写自己的 css，但我无法做到这一点。我想这是因为javascript而发生的。

【解决方案3】：

使用 Bootstrap 5.2.1 时，接受的答案对我不起作用。

但是，我只是简单地使用它：

.dropdown-menu {margin-top: -2px!important;}

【讨论】：