Question

我使用Bootstrap 4并创建了一张带有.card-header和.card-block的卡片，如下所示：

<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

Answer 1

滞后问题：

问题是 .card-block 类，它默认添加了1.25rem填充。

如果你要从div＃test-block中删除class card-block，并使用class card-block创建一个div（这样就可以保留你需要的填充），那么迟滞的问题就会消失。

Clicky问题：

＃test-block上没有崩溃的类，所以需要先添加它。这就是它第二次尝试的原因。

如果你添加一个名为＆＃34的课程;崩溃＆＃34; div＃test-block，你的滞后问题就会消失。

如果您希望默认打开面板，请添加＆＃34; in＆＃34;上课也是。例如＆＃34;崩溃＆＃34;。

我有以下代码：

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

Answer 2

这可能就是为什么bootstrap 4仍处于alpha状态。它可能会修复。

我找到的唯一解决方案是通过添加类card-block来折叠您的collapse，然后通过css删除他的填充：

.card-block{ padding:0; }

Answer 3

#test-block具有默认状态：

    <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，只需点击一下即可。

我不知道为什么动画不稳定。：（

Bootstrap 4可折叠卡 - 蹩脚的动画

3 个答案: