Bootstrap 4 个选项卡 - 第一个窗格未在页面加载时显示

Question

我对可选项卡面板有疑问。当我加载页面时，第一个窗格因页面加载而保持空白。当我切换到第二个窗格并返回到第一个窗格时。显示内容。我找不到解决方案，没有 javacript 错误，但我认为那一定是 javasript 问题。我正在使用 bootstrap 4 alpha 6 和 jquery3.1.1。还有 wow.js、jquery.easing 和系绳这是我的代码：

<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>

Answer 1

不要在 <p> 个元素中使用 h5 and/or <div>。

此外，从选项卡窗格中删除 fade，因为那样会阻止显示。

http://www.codeply.com/go/zMxKl2Zpq2

Bootstrap 4 个选项卡 - 第一个窗格未在页面加载时显示

Bootstrap 4 tabs - first pane not shown on pageload

pane

twitter-bootstrap-4

bootstrap-4