Bootstrap Содержимое вкладки не скрывается должным образом

Question

Я пытаюсь получить поле вкладки Bootstrap правильно, и у меня возникают некоторые трудности.

Содержимое содержит вкладки между каждым div, однако то, что я использую, заключается в том, что содержимое каждой вкладки отображается на странице, только скрыто. Поэтому всякий раз, когда нажимается одна из вкладок, все, что она делает, скрывает содержимое выше и отображает содержимое ниже, вместо правильного переключения.

На скриншоте ниже вы можете увидеть содержимое с вкладки #android-screenshots, отображаемой под содержимым вкладки #ios-screenshots, в результате чего появляется большое количество ненужного пробела.

Вот что моя разметка выглядит следующим образом:

<div id="mobile-splash-faq-screenshots" class="container-fluid"> 
    <div class="row"> 
     <!-- Nav tabs --> 
     <ul class="nav nav-tabs" role="tablist"> 
      <li role="presentation" class="active"><a href="#ios-screenshots" aria-controls="ios-screenshots" role="tab" data-toggle="tab">iOS Screenshots</a></li> 
      <li role="presentation"><a href="#android-screenshots" aria-controls="android-screenshots" role="tab" data-toggle="tab">Android Screenshots</a></li> 
      <li role="presentation"><a href="#faq" aria-controls="faq" role="tab" data-toggle="tab">FAQ</a></li> 
     </ul> 

     <!-- Tab panes --> 
     <div class="tab-content"> 
      <div class="container"> 
      <div role="tabpanel" class="tab-pane active fade in" id="ios-screenshots"> 
       <div class="screenshots"> 

       <p class="excerpt text-center">Screenshots taken on an iPhone 4S.</p> 

       <div class="col-sm-4"> 
        <img class="img-responsive" src="${contextRoot}/resources/assets/img/mobile-splash/ios_screenshot_01.png" /> 
       </div> 

       <div class="col-sm-4"> 
        <img class="img-responsive" src="${contextRoot}/resources/assets/img/mobile-splash/ios_screenshot_02.png" /> 
       </div> 

       <div class="col-sm-4"> 
        <img class="img-responsive" src="${contextRoot}/resources/assets/img/mobile-splash/ios_screenshot_03.png" /> 
       </div> 

       <div class="col-sm-4"> 
        <img class="img-responsive" src="${contextRoot}/resources/assets/img/mobile-splash/ios_screenshot_02.png" /> 
       </div> 

       <div class="col-sm-4"> 
        <img class="img-responsive" src="${contextRoot}/resources/assets/img/mobile-splash/ios_screenshot_03.png" /> 
       </div> 

       <div class="col-sm-4"> 
        <img class="img-responsive" src="${contextRoot}/resources/assets/img/mobile-splash/ios_screenshot_01.png" /> 
       </div> 

       </div> 
      </div> 

      <div role="tabpanel" class="tab-pane fade" id="android-screenshots"> 
       <div class="screenshots"> 

       <p class="excerpt text-center">Screenshots taken on a Google Nexus 6.</p> 

       <div class="col-sm-4"> 
        <img class="img-responsive" src="${contextRoot}/resources/assets/img/mobile-splash/android_screenshot_01.png" /> 
       </div> 

       <div class="col-sm-4"> 
        <img class="img-responsive" src="${contextRoot}/resources/assets/img/mobile-splash/android_screenshot_02.png" /> 
       </div> 

       <div class="col-sm-4"> 
        <img class="img-responsive" src="${contextRoot}/resources/assets/img/mobile-splash/android_screenshot_03.png" /> 
       </div> 

       <div class="col-sm-4"> 
        <img class="img-responsive" src="${contextRoot}/resources/assets/img/mobile-splash/android_screenshot_04.png" /> 
       </div> 

       <div class="col-sm-4"> 
        <img class="img-responsive" src="${contextRoot}/resources/assets/img/mobile-splash/android_screenshot_01.png" /> 
       </div> 

       <div class="col-sm-4"> 
        <img class="img-responsive" src="${contextRoot}/resources/assets/img/mobile-splash/android_screenshot_01.png" /> 
       </div> 

       </div> 
      </div> 

      <div role="tabpanel" class="tab-pane fade" id="faq"> 

      </div> 

      </div> 
     </div> 
    </div> 
</div> 

И это то, что выглядит мой Javascript как:

(function($) { 

    $('.nav-tabs a').on('click', function (e) { 
    e.preventDefault(); 
    $(this).tab('show'); 
}); 

})(jQuery); 

Answer 1

Успели решить эту проблему, добавив следующий CSS:

.tab-pane:not(.active) { 
     display: none; 
    }