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