bootstrap Popper警告：当data-bs-display="static"时，.dropdown-menu的margin使用,

a5g8bdjr 于 2个月前发布在 Bootstrap

关注(0)|答案(8)|浏览(66)

前提条件

我有一个用于重复或关闭问题的 searched
我有一个任何HTML以避免常见问题
我阅读了 contributing guidelines

描述问题

每次我打开一个包含 data-bs-display="static" 的下拉菜单时，Popper 2.11.5 在浏览器控制台中发出警告。
Popper:CSS "margin"样式不能用于在弹出窗口和其引用元素或边界之间应用内边距。要复制边距，请使用 offset 修饰符，以及 preventOverflow 和 flip 修饰符中的 padding 选项。
似乎是由于在 .dropdown-menu 上使用了 margin-top 导致的，如果我在浏览器检查器中禁用该规则，Popper 就不会再发出警告：

.dropdown-menu {
  &[data-bs-popper] {
    margin-top: var(--#{$prefix}dropdown-spacer);
  }
}

简化的测试用例

点击按钮并查看浏览器控制台：
https://codepen.io/costka/pen/GRxmqyV

!!! 仅在使用非最小化的 Popper 版本时出现警告，最小化版本会移除控制台日志记录。

您正在哪个操作系统上看到问题？

Windows

您正在哪个浏览器上看到问题？

Chrome, Firefox

您正在使用哪个版本的Bootstrap?

v5.2.0, Popper.js 2.11.5

Bootstrap

来源：https://github.com/twbs/bootstrap/issues/36789

8条答案

按热度按时间

7hiiyaii1#

关于何时解决这个问题的思考？目前我已经从v5.2.1中移除了它。

赞(0）回复(0）举报 2个月前

cclgggtu2#

我愿意在#35901处理它。

赞(0）回复(0）举报 2个月前

monwx1rj3#

我们刚刚从Bootstrap 5.1.3升级到5.2.1,这个Popper警告开始出现。我们在Bootstrap导航栏中使用margin来偏移一个下拉菜单。显然，我们不能使用Popper建议的偏移解决方案，因为导航栏中的下拉菜单不使用Popper。似乎目前，在导航栏下拉菜单的上下文中，没有解决这个警告的方法。

赞(0）回复(0）举报 2个月前

8i9zcol24#

我开始在Bootstrap中遇到了一些下拉菜单项的问题。有时候它可以正常工作，有时候却不能：(
然后我升级了Bootstrap,并开始了解发生了什么。最后，我用*.js导入替换了bootstrap和Popper min.js文件，当它不能正常工作时，我也看到了这个警告。

"@popperjs/core": "^2.11.6",
    "bootstrap": "^5.2.3",

我应该如何解决这个问题？
我正在使用Angular@14.2
我不担心这个警告，但导航栏目前是坏的：'(

赞(0）回复(0）举报 2个月前

xmjla07d5#

我通过在 dropdown-menu 元素中添加 mt-0 来解决了这个问题。

赞(0）回复(0）举报 2个月前

svmlkihl6#

@billhance 聪明的技巧，当然也在这里消除了警告。

赞(0）回复(0）举报 2个月前

0x6upsns7#

在包含Bootstrap之后，我添加了这个：

.dropdown-menu[data-bs-popper] {
    top: calc(100% + var(--#{$prefix}dropdown-spacer));
    margin-top: 0;

    .dropup & {
        bottom: calc(100% + var(--#{$prefix}dropdown-spacer));
        margin-bottom: 0;
    }

    .dropend & {
        left: calc(100% + var(--#{$prefix}dropdown-spacer));
        margin-left: 0;
    }

    .dropstart & {
        right: calc(100% + var(--#{$prefix}dropdown-spacer));
        margin-right: 0;
    }
}

赞(0）回复(0）举报 2个月前

lyr7nygr8#

警告仍然存在于v5.2.3版本中。Bill的评论确实消除了这个警告：
我通过在dropdown-menu元素中添加mt-0来解决这个问题。

赞(0）回复(0）举报 2个月前

我来回答

bootstrap Popper警告：当data-bs-display="static"时，.dropdown-menu的margin使用,

前提条件

描述问题

简化的测试用例

您正在哪个操作系统上看到问题？

您正在哪个浏览器上看到问题？

您正在使用哪个版本的Bootstrap?

8条答案

相关问题

热门标签

最新问答