Bootstrap-vue b-dropdown ul 菜单设置为隐藏不显示无答案

【问题标题】：Bootstrap-vue b-dropdown ul menu set to hidden not display noneBootstrap-vue b-dropdown ul 菜单设置为隐藏不显示无
【发布时间】：2020-07-04 15:44:09
【问题描述】：

如果您检查 b-dropdown 的 bootstrap-vue 文档，您会看到所有下拉菜单在不活动时都具有 display: none 样式。这实际上是我所期望的。只需检查示例 HERE 中的任何下拉列表。

但由于某种原因，当我将它添加到我的页面时，所有下拉列表都会得到visibility: hidden。由于我在页面末尾附近有一个更大的下拉列表，因此即使不需要滚动条，它也会添加滚动条。见下图。

如果您将元素悬停在开发工具上，您可以看到隐藏元素的位置。

深入了解我发现这个导入的开发工具

@charset "UTF-8";
/*!
 * Bootstrap v4.5.0 (https://getbootstrap.com/)
 * Copyright 2011-2020 The Bootstrap Authors
 * Copyright 2011-2020 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */

...

.dropdown .dropdown-menu {
  background-color: #FFFFFF;
  border: 0 none;
  border-radius: 12px;
  display: block;
  margin-top: 10px;
  padding: 0px;
  position: absolute;
  visibility: hidden;
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-box-shadow: 0 2px rgba(17, 16, 15, 0.1), 0 2px 10px rgba(17, 16, 15, 0.1);
  box-shadow: 0 2px rgba(17, 16, 15, 0.1), 0 2px 10px rgba(17, 16, 15, 0.1);
}

...

.dropup.show .dropdown-menu {
  -webkit-transform: translate3d(0, -10px, 0);
  transform: translate3d(0, -10px, 0);
  opacity: 1;
  visibility: visible;
}

但我在我的依赖项中找不到这个文件。

如果有人能指出在哪里查找以及如何解决此问题，我将不胜感激。

谢谢

【问题讨论】：

检查您的 index.html，检查您是否从 CDN 添加引导程序

标签： vue.js dropdown bootstrap-vue

【解决方案1】：

这是问题 - https://demos.creative-tim.com/bs3/paper-kit/components.html#dropdown-row

我正在做的项目也在使用这个工具包，它对引导样式进行了一些更改。

【讨论】：