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 から class card-block を削除し、class card-block を使用して内部に div を作成すると (必要なパディングを維持できます)、遅延の問題は解消されます。

クリック感のある問題:

#test-block には折りたたまれたクラスがないため、最初に追加する必要があります。そのため、2 回目の試行で機能します。

「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

それがおそらく、ブートストラップ 4 がまだアルファ版である理由です。それはおそらく修正されるでしょう。

私が見つけた唯一の解決策はcard-block、 class を追加して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 に答える