除第一个选项卡外的所有选项卡均不显示信息（Bootstrap 4.2.1）

Question

我将此代码用于引导程序4.2.1中的选项卡

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
    
    
        <ul class="nav nav-tabs">
          <li class='nav-item'>
            <a class='nav-link active' data-toggle='tab' href='#s1'>12</a>
          </li>
          <li class='nav-item'>
            <a class='nav-link ' data-toggle='tab' href='#s2'>13</a>
           </li>
           <li class='nav-item'>
             <a class='nav-link ' data-toggle='tab' href='#s3'>16</a>
           </li>
           <li class='nav-item'>
             <a class='nav-link ' data-toggle='tab' href='#s4'>17</a>
           </li>
           <li class='nav-item'>
             <a class='nav-link ' data-toggle='tab' href='#s5'>18</a>
           </li><li class='nav-item'>
             <a class='nav-link ' data-toggle='tab' href='#s6'>19</a>
           </li>    
         </ul>
    
         <!-- Tab panes -->
           <div class="tab-content">
             <div class='tab-pane container fade in show active' id='s1'>1</div>
             <div class='tab-pane container fade' id='s2'>2</div>
             <div class='tab-pane container fade' id='s3'>3</div>
             <div class='tab-pane container fade' id='s4'>4</div>
             <div class='tab-pane container fade' id='s5'>5</div>
             <div class='tab-pane container fade' id='s6'>6</div>    
           </div>

它在jsfiddle.net中正常工作 但在我的项目中不起作用 为什么？

主选项卡显示数据，但是当我单击其他选项卡时，其内容将不会显示