Вкладки не работают в Bootstrap v4.3.1, но работают в v4.1.0

Question

У меня очень своеобразная ситуация.После почти 3 часов игры с кодом я только что понял, что мой код не работает на последней версии Bootstrap v4.3.1, но хорошо работает в v4.1.0

Работает JSFiddle с использованием Bootstrap v4.1.0: https://jsfiddle.net/h1m87yr5/

Не работает JSFiddle с использованием Bootstrap v.4.3.1: 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
• , изменили имена идентификаторов, чтобы онине начинайте с цифры ... так что '# 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>