bootstrap-4 – Bootstrap 4选项卡 – 第一个窗格未在页面加载中

我的tabbable窗格有问题.当我加载页面时,第一个窗格通过pageload保持为空.当我切换到第二个窗格并返回第一个窗格时.显示内容.我找不到解决方案,没有 javacript错误,但我认为这必须是一个javasript问题.我正在使用bootstrap 4 alpha 6和jquery3.1.1.还有wow.js,jquery.easing和tether
这是我的代码：

<div class="tabbable-panes">
		  <ul id="clothing-nav" class="nav nav-tabs" role="tablist">
	       <li class="nav-item">
             <a class="nav-link active" href="#home" id="home-tab" role="tab" data-toggle="tab" aria-controls="home" aria-expanded="true">Button Groups</a>
           </li>
           <li class="nav-item">
             <a class="nav-link" href="#hats" role="tab" id="hats-tab" data-toggle="tab" aria-controls="hats">Button Toolbar</a>
           </li>

           <!-- Dropdown -->
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
                 Button Dropdown
              </a>
               <div class="dropdown-menu">
                 <a class="dropdown-item" href="#dropdown-combine" role="tab" id="dropdown-combine-tab" data-toggle="tab" aria-controls="dropdownCombine">Combining</a>
                 <a class="dropdown-item" href="#dropdown-split" role="tab" id="dropdown-split-tab" data-toggle="tab" aria-controls="dropdownSplit">Split</a>
               </div>
            </li>
           </ul>
          </div>
          <!-- Content Panel -->
            <div id="clothing-nav-content" class="tab-content">
             <div role="tabpanel" class="tab-pane fade in active" id="home" aria-labelledby="home-tab">
               <p>
			   <h5><i class="fa fa-hashtag" aria-hidden="true" ></i> Button Groups Horizontal</h5>
			    <div class="btn-group" role="group">
                      <button type="button" class="btn btn-primary btn-sm">HTML5</button>
                      <button type="button" class="btn btn-primary btn-sm">CSS3</button>
                      <button type="button" class="btn btn-primary btn-sm">SCSS</button>
                </div>
			   </p>
			   <p>
			   <h5><i class="fa fa-hashtag" aria-hidden="true" ></i> Button Groups Vertical</h5>
			    <div class="btn-group-vertical" role="group">
                      <button type="button" class="btn btn-primary btn-sm">HTML5</button>
                      <button type="button" class="btn btn-primary btn-sm">CSS3</button>
                      <button type="button" class="btn btn-primary btn-sm">SCSS</button>
                </div>
			   </p>
			   <p>just add <code>vertical</code>to the btn-group class <code>class="btn-group-vertical"</code></p>
             </div>
             <div role="tabpanel" class="tab-pane fade" id="hats" aria-labelledby="hats-tab">
               <p>
			    <h5><i class="fa fa-hashtag" aria-hidden="true"></i> Button Toolbar</h5>
				<p>you can combine btn-groups by nest theme into one single - toolbar</p>
                  
				  <table class="table table-sm table-responsive">
                    <thead>
                      <tr>
                       <th>Button Toolbar</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                       <td>
					    <div class="btn-toolbar" role="toolbar">
                         <div class="btn-group" role="group">
                          <button type="button" class="btn btn-primary btn-sm">One</button>
                          <button type="button" class="btn btn-primary btn-sm">One</button>
                          <button type="button" class="btn btn-primary btn-sm">One</button>
                         </div>
                         <div class="btn-group" role="group">
                          <button type="button" class="btn btn-primary btn-sm">Two</button>
                          <button type="button" class="btn btn-primary btn-sm">Two</button>
                         </div>
                        </div>
					   </td>
                      </tr>
                    </tbody>
                   </table>
				   
				 </p>
             </div>
             <div role="tabpanel" class="tab-pane fade" id="dropdown-combine" aria-labelledby="dropdown-combine-tab">
			 <p>
			 <h5><i class="fa fa-hashtag" aria-hidden="true"></i> Button Groups combined with Dropdown</h5>
			 <p>you can nest dropdowns into button groups by using a seperate btn-group inside.</p>
              <p>
			  
			   <table class="table table-sm table-responsive">
                    <thead>
                      <tr>
                       <th>dropdown with btn-groups</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                       <td>
					    <div class="btn-group" role="group">
                          <button type="button" class="btn btn-primary btn-sm">Home</button>
                          <button type="button" class="btn btn-primary btn-sm">Service</button>
                           <div class="btn-group" role="group">
                              <button class="btn btn-primary btn-sm dropdown-toggle" type="button" id="about-us" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                              About
                              </button>
                           <div class="dropdown-menu" aria-labelledby="about-us">
                             <a class="dropdown-item" href="#">Portfolio</a>
                             <a class="dropdown-item" href="#">Impressum</a>
                             <a class="dropdown-item" href="#">Contact</a>
                           </div>
                          </div>
                        </div>
					   </td>
                      </tr>
                    </tbody>
                   </table>
				   
               </p>
             </div>
             <div role="tabpanel" class="tab-pane fade" id="dropdown-split" aria-labelledby="dropdown-split-tab">
			 <p>
               <h5><i class="fa fa-hashtag" aria-hidden="true"></i> Split Dropdown's</h5>
			 <p>With button groups you can creat a split dropdown-menu</p>
              <p>
			   <table class="table table-sm table-responsive">
                    <thead>
                      <tr>
                       <th>Split Dopdown's</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                       <td>
					    <div class="btn-group">
                          <button type="button" class="btn btn-primary btn-sm">About</button>
                          <button type="button" class="btn btn-primary btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                           <span class="sr-only">Toggle Dropdown</span>
                             </button>
                             <div class="dropdown-menu">
                               <a class="dropdown-item" href="#">Portfolio</a>
                               <a class="dropdown-item" href="#">Impressum</a>
                               <a class="dropdown-item" href="#">Contact</a>
                             </div>
                         </div>
					   </td>
                      </tr>
                    </tbody>
                   </table>
				  </p>
            </div>
           </div>