如何洗掉下拉切換按鈕和下拉選單元素之間的空間？-有解無憂

為什么下拉切換按鈕和下拉選單之間有空格？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/[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 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/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>

    </body>
</html>

編輯：編輯 css 代碼，使空間容易可見

uj5u.com熱心網友回復：

要消除切換元素和下拉選單之間的間隙，請應用此 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/[email protected]/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/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>

</body>

uj5u.com熱心網友回復：

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

當您單擊切換按鈕時，這就是將選單向下推的原因

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/421151.html

標籤：

上一篇：如何替換div中的特定字符？

下一篇：按下空格時禁用自動向下滾動