13

我正在使用 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"卡片标题中的）。它有效 - 但动画非常不稳定。

我不知道为什么。这是一个关于 codepen 的例子。

4

3 回答 3

15

滞后问题：

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

如果您要从 div#test-block 中删除类 card-block，并在里面创建一个带有类 card-block 的 div（这样您就可以保留所需的填充），那么滞后的问题就会消失。

点击问题：

#test-block 上没有带折叠的类，因此需要先添加它。这就是为什么它在第二次尝试时有效。

如果你将一个名为“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-10T17:04:53.323 回答
3

这可能是 bootstrap 4 仍处于 alpha 阶段的原因。它可能会修复。

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

.card-block{ padding:0; }
于 2015-11-10T17:03:51.550 回答
0

#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它应该只需要单击 1 次。

我不知道为什么动画是波涛汹涌的。:(

于 2015-11-10T17:09:07.617 回答