先决条件
- 我有一个用于重复或关闭问题的 searched
- 我有 validated 任何HTML以避免常见问题
- 我阅读了 contributing guidelines
描述问题
建议在禁用的按钮上使用ngb-tooltip,将div围绕按钮。在Bootstrap 4中,这将在input-group中正确显示,使用input-group-append div围绕按钮,并将input-group-text添加到按钮本身。
在Bootstrap 5中,input-group-append已被弃用,input-group-text现在是唯一可以将项目附加到input-group的选项。input-group-text div中的按钮不显示正确(参见示例1)。添加另一个input-group也无法解决问题。添加一个btn-group可以工作,但因为只有一个项目(按钮),顶部左角和底部左角的边框仍然应用半径(示例2)。
我发现了两个解决方法:
添加一个额外的隐藏按钮 - 这会在中间有双边框(非常微弱)
将btn-group和input-group都添加到原始元素 - 这有两个不同的bug - 在悬停时结束边框半径消失。此外,当页面宽度减小时,这两个元素会换行(使用flex-nowrap固定)。
根据 bastienmoulia 建议的另一个解决方法:
对于第二个解决方法,您可以添加rounded-end类以强制在悬停时按钮的半径。
https://getbootstrap.com/docs/5.3/utilities/borders/#radius
问题已在ngb-bootstrap仓库中提出:ng-bootstrap/ng-bootstrap#4448
简化的测试用例
https://stackblitz.com/edit/angular-mpk2kv?file=src/app/tooltip-basic.html
您在哪个操作系统上看到问题?
Windows
您在哪个浏览器上看到问题?
Chrome
您使用的Bootstrap版本是什么?
5.2.3
1条答案
按热度按时间pqwbnv8z1#
你好,关于这个问题有什么新消息吗?它会被修复吗?
谢谢。