Bootstrap 4 导航选项卡命名空间冲突：用于导航项目和选项卡窗格激活的类“显示”？答案

【问题标题】：Bootstrap 4 nav-tabs namespace collision: class “show” for nav-item & tab-panes activation?Bootstrap 4 导航选项卡命名空间冲突：用于导航项目和选项卡窗格激活的类“显示”？
【发布时间】：2018-02-18 01:47:23
【问题描述】：

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

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

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

.show{
    position: fixed;
    right: 50px;
    bottom: 70px;
    color : red;
}

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

而且，除了预期的.active 类.show 之外，我还想检查我看到的导航和选项卡上的元素：

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

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

https://github.com/twbs/bootstrap/search?utf8=%E2%9C%93&q=show&type=

【问题讨论】：

标签： twitter-bootstrap bootstrap-4

【解决方案1】：

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

来自文档：

第一个选项卡窗格还必须有 .show 才能使初始内容可见。

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

还有：

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

【讨论】：