貓頭鷹旋轉木馬v2，項目寬度計算錯誤，如果旋轉木馬後面標籤內容

我建立了2響應貓頭鷹旋轉木馬v2在一個頁面看起來很完美。當我把它們放入標籤後，第一個傳送帶工作，但後面的標籤面板失去了它的項目寬度，我無法使它工作。如果我具有一定寬度的所有項目，則所有項目將垂直列出。貓頭鷹旋轉木馬v2，項目寬度計算錯誤，如果旋轉木馬後面標籤內容

這裏是我的演示筆： http://codepen.io/bard/pen/NxqyQy/

我想這個問題是項目寬度計算頁面加載時。

如何解決這個問題？

HTML：

<ul class="nav nav-tabs"> 
        <li class="active"><a data-toggle="tab" href="#track1">Track1</a></li> 
        <li><a data-toggle="tab" href="#track2">Track2</a></li> 
       </ul> 
       <div class="panel tab-content"> 
        <div id="track1" class="panel-body tab-pane fade in active"> 
    <div class="container-fluid tracker"> 
     <div class="wrapper-with-margin"> 
      <div id="owl-demo" class="owl-carousel"> 
       <div class="item" style="">1</div> 
       <div class="item" style="">2</div> 
       <div class="item" style="">3</div> 
       <div class="item" style="">4</div> 
       <div class="item" style="">5</div> 
       <div class="item" style="">6</div> 
       <div class="item" style="">7</div> 
       <div class="item" style="">8</div> 
       <div class="item" style="">9</div> 
      </div> 
     </div> 
    </div> 
        </div> 
        <div id="track2" class="panel-body tab-pane fade"> 
    <div class="container-fluid tracker"> 
     <div class="wrapper-with-margin"> 
      <div id="owl-demo2" class="owl-carousel"> 
       <div class="item" style="">9</div> 
       <div class="item" style="">8</div> 
       <div class="item" style="">7</div> 
       <div class="item" style="">6</div> 
       <div class="item" style="">5</div> 
       <div class="item" style="">4</div> 
       <div class="item" style="">3</div> 
       <div class="item" style="">2</div> 
       <div class="item" style="">1</div> 
      </div> 
     </div> 
    </div> 
        </div> 
       </div>

來源

2015-12-11 bard

可以解決這個與一些CSS。貓頭鷹旋轉木馬在初始化時根據容器寬度調整項目大小。由於該div是隱藏的，因此沒有可供參考的寬度，並且導致了一堆。你可以像這樣用CSS糾正這一點，

.tab-content>.tab-pane { 
    display: block; 
    width: 100%; 
    height: 0; 
    padding: 0; 
} 

.active .tab-content>.tab-pane { 
    height: auto; 
    padding: 15px; 
}

更新筆：http://codepen.io/anon/pen/vLNNem

你也可以改變你的JavaScript來初始化第二輪播用戶點擊第二個選項卡後，但我可能只是做到這一點的CSS方式。

來源

2015-12-11 20:13:32 Taytorious

問題在於切換'display：none'/'display：block'選項卡並且旋轉木馬不知道激活選項卡內容的新寬度，這就是爲什麼它看起來崩潰了;

要解決它，你可以使用不同的方法來隱藏/顯示標籤，例如像這樣的CSS，然後在jQuery的切換這些類：

.tab-hidden { 
visibility: hidden; 
height: 0; 
overflow: hidden; 
opacity: 0; 
transition: all 0.5s ease; 
} 

.tab-visible { 
visibility: visible; 
height: auto; 
overflow: visible; 
opacity: 1; 
transition: all 0.5s ease; 
}

你可以在這裏測試的工作代碼： http://codepen.io/slyka85/pen/MbpXxp

來源

2016-12-02 02:33:07

貓頭鷹旋轉木馬v2，項目寬度計算錯誤，如果旋轉木馬後面標籤內容

回答

相關問題