How can I remove the space between the dropdown-toggle button and dropdown-menu elements?-CodePudding

Why is there a space between dropdown-toggle button and dropdown-menu? The box-shadow hides the space, but when the box-shadow is removed, you can see the space easily. This is the code:

<!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/[email protected]/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 >
            <div >
                <button
                    
                    type="button"
                    id="dropdownMenuButton1"
                    data-bs-toggle="dropdown"
                    aria-expanded="false"
                >
                    Dropdown button
                </button>
                <ul  style="vertical-align: top;" aria-labelledby="dropdownMenuButton1">
                    <li><a  href="#">Action</a></li>
                    <li>
                        <a  href="#">Another action</a>
                    </li>
                    <li>
                        <a  href="#"
                            >Something else here</a
                        >
                    </li>
                </ul>
            </div>
        </div><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>

    </body>
</html>

Edit: edited the css code the make the space visible easily

CodePudding user response：

To eliminate the gap between the toggle element and the dropdown, apply this CSS. It's a rare case where using !important seems appropriate, since the original styles are applied inline by the Bootstrap script.

Optionally apply some border-radius overrides to visually combine the elements when open.

.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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>

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

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

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

</body>

CodePudding user response：

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

This is what pushes the menu down when you click the toggle