Question

我的标签内有滑块。

          <div id="tabs">
            <!-- Nav tabs -->
            <ul class="nav nav-tabs responsive-tabs capital bold text-center m-b-25">
              <li class="active "><a href="#portfolio" role="tab" data-toggle="tab">portfolio</a></li>
              <li class=""><a href="#recomendation" role="tab" data-toggle="tab">recomendation</a></li>
              <li class=""><a href="#statistic" role="tab" data-toggle="tab">statistic</a></li>
            </ul>

            <!-- Tab panes -->
            <div class="tab-content">
              <div class="tab-pane fade in active" id="portfolio">
                <div class="row inner">
                  <div class="my-portfolio">
                    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                      <div class="card m-15">
                        <div class="card-head">
                          <img src="img/slider.png" class="img-responsive"><!-- http://placehold.it/180x180 -->
                        </div><!-- card-head -->
                        <div class="card-body">
                          <h5 class="title uppercase bold text-center">chocolate chip cookies</h5>
                          <div class="tag">
                            <a href="#">appetizer</a>,<a href="#"> vegetarian</a>
                          </div><!-- tag -->
                        </div><!-- card-body -->
                        <div class="card-footer m-t-10">
                          <div class="score">
                            <li>200</li>
                            <li>200</li>
                            <li>200</li>
                          </div>
                        </div><!-- card-footer m-t-10 -->
                      </div><!-- card m-15 -->
                    </div><!-- col-lg-3 col-md-4 col-sm-6 col-xs-12 -->
                  </div><!-- my-portfolio -->                     
                </div><!-- row inner -->
                <div class="my-profile-load-more">
                  <div class="btn btn-default btn-block m-20 bold capital">load more comment</div>
                </div>
              </div><!-- tab-pane#portfolio -->
              <div class="tab-pane fade in" id="recomendation">
                <h4 class="bold capital">reviews <span style="font-weight: normal;color: #c2c2c2;">(5)</span></h4>
                <p class="capital bold">Review from older company</p>
                  <div class="review-company">
                    <img src="http://placehold.it/350x150">
                    <img src="http://placehold.it/350x150">
                    <img src="http://placehold.it/350x150">
                    <img src="http://placehold.it/350x150">
                    <img src="http://placehold.it/350x150">
                  </div><!-- Review-company -->
                 </div><!-- tab-pane#recomendation -->
              <div class="tab-pane fade in" id="statistic">
                <h4 class="bold uppercase">portfolio <span style="font-weight: normal;color: #c2c2c2;">(12)</span></h4>
                <div class="row">
                  <div class="col-lg-6 col-md-6 col-sm-6 col-sm-6">
                    <h4 class="bold capital">difficulty</h4>
                  </div>
                  <div class="col-lg-6 col-md-6 col-sm-6 col-sm-6">
                    <h4 class="bold capital">tag</h4>
                  </div>
                </div>
                <div class="row">
                  <div class="col-lg-6 col-md-6 col-sm-6 col-sm-6">
                    <h4 class="bold capital">ingredient key word</h4>
                  </div>
                  <div class="col-lg-6 col-md-6 col-sm-6 col-sm-6">
                    <h4 class="bold capital">base on ingredient</h4>
                  </div>
                </div>
                <hr>
              </div><!-- statistic -->
            </div><!-- tab-content -->  
          </div><!-- tabs -->

$('.review-company').owlCarousel({
    center: true,
    items:2,
    loop:true,
    margin:10,
    responsive:{
        600:{
            items:4
        }
    }
});

对于第一次加载，滑块图像尺寸与顶部图像一样小 http://s20.postimg.org/caf6908l9/image.png

但是一旦我去检查元素或最小化。这个bug就像图像2一样消失了。如何清除bug先生？请帮助我谢谢

Answer 1

标签隐藏了类，并且未初始化owl

尝试这样的事情

$(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
// Enter here your owl code
})

owl carousel2里面的navb-tab bootstrap 3.3.6得到了bug

1 个答案: