Bootstrap 4 nav-tabs 命名空间冲突：nav-item 的类”show”


Bootstrap 4 nav-tabs namespace collision: class “show” for nav-item & tab-panes activation?

更短的版本可能是：.show 是保留的 Bootstrap 4 类名吗？

从 alpha-6 升级到 Bootstrap 4.0.0 后，我的 UI 出现了各种问题。导航链接被隐藏，标签窗格出现在我的屏幕底部。

然后我注意到我的 Vue 组件有这个 CSS：

1
2
3
4
5
6
.show{
    position: fixed;
    right: 50px;
    bottom: 70px;
    color : red;
}

这对应于我的选项卡窗格出现在错误的位置。

而且，除了预期的 .active 类 .show:

之外，我好奇的是检查我看到的导航和选项卡上的元素

enter image description here

但我很确定我没有把它放在那里，所以想知道 Bootstrap 4 现在是否添加了 .show 以及 .active。这在任何地方都有记录吗？如果是这样，我需要避免 css 类名冲突，在我的情况下，将 Vue 组件的嵌入式 css 更改为 .show2 让我的问题暂时消失。

在 Bootstrap 的 github 上搜索 show 看起来他们确实使用它：

https://github.com/twbs/bootstrap/search?utf8=?

是的，.show 类(以及 .active)肯定被 Bootstrap 4 用于导航选项卡和其他一些东西。

来自文档：

The first tab pane must also have .show to make the initial content visible.

https://getbootstrap.com/docs/4.0/components/navs/#via-javascript

和：

https://getbootstrap.com/docs/4.0/components/list-group/#tabshow