标签在 Bootstrap v4.3.1 中不起作用，但在 v4.1.0 中有效

Question

我有一个非常特殊的情况。在玩了将近 3 个小时的代码后，我才意识到我的代码在最新版本的 Bootstrap v4.3.1 上不起作用，但在 v4.1.0 中运行良好

使用 Bootstrap v4.1.0工作JSFiddle： https ://jsfiddle.net/h1m87yr5/

使用 Bootstrap v.4.3.1 的非工作JSFiddle： https ://jsfiddle.net/h1m87yr5/1/

请注意，两个版本的代码保持不变。可能是什么原因？

HTML：

<div id="exTab1" class="container">
  <ul class="nav nav-pills">
    <li class="active">
      <a href="#1a" data-toggle="tab">Overview</a>
    </li>
    <li><a href="#2a" data-toggle="tab">About Us</a>
    </li>
    <li><a href="#3a" data-toggle="tab">Services</a>
    </li>
    <li><a href="#4a" data-toggle="tab">Contact Us</a>
    </li>
  </ul>
  <div class="tab-content clearfix">
    <div class="tab-pane active" id="1a">
      <h3>Content's background color is the same for the tab</h3>
    </div>
    <div class="tab-pane" id="2a">
      <h3>We use the class nav-pills instead of nav-tabs which automatically creates a background color for the tab</h3>
    </div>
    <div class="tab-pane" id="3a">
      <h3>We applied clearfix to the tab-content to rid of the gap between the tab and the content</h3>
    </div>
    <div class="tab-pane" id="4a">
      <h3>We use css to change the background color of the content to be equal to the tab</h3>
    </div>
  </div>
</div>

CSS：

.nav a {
  margin: 10px;
  background-color: #eee;
  border-radius: 2px;
  padding: 7px;
}
.tab-content .tab-pane h3 {
    opacity: 0;
    -moz-transform: translateX(50px);
    -ms-transform: translateX(50px);
    -o-transform: translateX(50px);
    -webkit-transform: translateX(50px);
    transform: translateX(50px);
    transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1);
}  
.tab-content .active h3 {
    opacity: 1;
    transform: translate(0);
}
#exTab1 .tab-content {
    overflow: hidden;
} 
#exTab1>.tab-content>.tab-pane {
    display: block;
    position: absolute;
    overflow: hidden;
}

Answer 1

你的小提琴有两个变化

• 将课程添加nav-link到所有li > a
• 更改了 ID 的名称，使它们不以数字开头……所以“#1a”变成了“#a1a”；“#2a”变成了“#a2a”……等等……

.nav a {
  margin: 10px;
  background-color: #eee;
  border-radius: 2px;
  padding: 7px;
}

.tab-content .tab-pane h3 {
  opacity: 0;
  -moz-transform: translateX(50px);
  -ms-transform: translateX(50px);
  -o-transform: translateX(50px);
  -webkit-transform: translateX(50px);
  transform: translateX(50px);
  transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1);
}

.tab-content .active h3 {
  opacity: 1;
  transform: translate(0);
}

#exTab1 .tab-content {
  overflow: hidden;
}

#exTab1>.tab-content>.tab-pane {
  display: block;
  position: absolute;
  overflow: hidden;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>


<div id="exTab1" class="container">
  <ul class="nav nav-pills">
    <li class="active">
      <a class="nav-link active" href="#a1a" data-toggle="tab">Overview</a>
    </li>
    <li><a class="nav-link " href="#a2a" data-toggle="tab">About Us</a>
    </li>
    <li><a class="nav-link " href="#a3a" data-toggle="tab">Services</a>
    </li>
    <li><a class="nav-link " href="#a4a" data-toggle="tab">Contact Us</a>
    </li>
  </ul>

  <div class="tab-content clearfix">
    <div class="tab-pane active" id="a1a">
      <h3>Content's background color is the same for the tab</h3>
    </div>
    <div class="tab-pane" id="a2a">
      <h3>We use the class nav-pills instead of nav-tabs which automatically creates a background color for the tab</h3>
    </div>
    <div class="tab-pane" id="a3a">
      <h3>We applied clearfix to the tab-content to rid of the gap between the tab and the content</h3>
    </div>
    <div class="tab-pane" id="a4a">
      <h3>We use css to change the background color of the content to be equal to the tab</h3>
    </div>
  </div>
</div>