引導4可摺疊卡 - 波濤洶涌的動畫

我使用的是引導4和創建了一個帶有.card頭和.card塊，像這樣一張牌：引導4可摺疊卡 - 波濤洶涌的動畫

<div class="card"> 
    <div class="card-header"> 
     <a data-toggle="collapse" href="#test-block" aria-expanded="true" aria-controls="test-block"> 
      card header 
     </a> 
    </div> 
    <div id="test-block" class="card-block"> 
     card block 
    </div> 
</div>

我希望能夠點擊卡頭來切換卡塊。我試過使用Bootstrap的崩潰機制（你會注意到卡頭中的data-toggle="collapse"）。它的作品 - 但動畫是非常波濤洶涌。

我不明白爲什麼。 Here's an example on codepen。

來源

2015-11-10 jbyrd

Laggy問題：

的問題是。卡片塊類，它默認添加1.25rem的填充。

如果你想從div＃test-block中刪除class card-block，並用class card-block創建一個div（所以你需要保留填充），laggy問題就會消失。

Clicky問題：

沒有您＃試塊崩沒課，所以需要先添加它。這就是爲什麼它在第二次嘗試中起作用。

如果您將名爲「collapse」的類添加到div＃test-block，您的遲緩問題將消失。

如果您希望面板默認打開，請添加「in」類。例如「崩潰」。

我有以下代碼：

<div class="card"> 
    <div class="card-header"> 
     <a data-toggle="collapse" href="#test-block" aria-expanded="true" aria-controls="test-block"> 
      card header 
     </a> 
    </div> 
    <div id="test-block" class="collapse"> 
     <div class="card-block"> 
      card block 
     </div> 
    </div> 
</div>

來源

2015-11-10 17:04:53 Timon

不錯的解決方案，也可以添加'collapse in'類來獲得已經打開的塊默認情況下 –

補充，謝謝你的輸入 – Timon

這樣做！我設置.card-block爲填充：0，並添加了一個div.card-block-content來代替padding。 – jbyrd

這可能是爲什麼引導程序4仍然在alpha。它可能會被修復。

我發現的唯一的解決辦法是，通過添加類collapse，然後通過CSS刪除他的填充你的card-block崩潰：

.card-block{ padding:0; }

來源

2015-11-10 17:03:51 Nvan

的＃試塊有默認的狀態：

<div id='test-block' class='card block'>

當點擊一次班級變化的

<div id='test-block' class="card-block collapse in" aria-expanded="true">

的擴展版本

因此，該div沒有正確的默認狀態。更改狀態以反映collapse in和aria-expanded=true，並且只需要點擊一次即可。

我不知道爲什麼動畫是波濤洶涌。 :(

來源

2015-11-10 17:09:07 Halycon

引導4可摺疊卡 - 波濤洶涌的動畫

回答

相關問題