【问题标题】:Bootstrap 4 Collapsible Card - Choppy AnimationBootstrap 4 可折叠卡片 - 断断续续的动画
【发布时间】:2016-02-11 15:03:55
【问题描述】:

我正在使用 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.

【问题讨论】:

    标签: javascript css twitter-bootstrap twitter-bootstrap-4 bootstrap-4


    【解决方案1】:

    滞后问题:

    问题在于 .card-block 类,它默认添加了 1.25rem 的填充。

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

    点击问题:

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

    如果你将一个名为“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>
    

    【讨论】:

    • 不错的解决方案。此外,添加collapse in 类以默认情况下已打开块也会很有用。
    • 做到了!我将 .card-block 设置为 padding: 0,并添加了一个 div.card-block-content 来代替填充。
    • @RashadIbrahimov - 如果你希望它默认打开,是的。就我而言,我实际上没有。
    【解决方案2】:

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

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

    .card-block{ padding:0; }
    

    【讨论】:

      【解决方案3】:

      #test-block 具有默认状态:

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

      当类更改为扩展版本时单击

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

      所以 div 没有正确的默认状态。更改状态以反映 collapse inaria-expanded=true,它应该只需要单击 1 次。

      我不知道为什么动画会断断续续。 :(

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2011-02-27
        • 1970-01-01
        • 2016-12-24
        • 1970-01-01
        • 1970-01-01
        • 2011-05-25
        • 1970-01-01
        • 2012-02-08
        相关资源
        最近更新 更多