【Bootstrap4】折りたたみメニューがカクつく時の対処法【簡単です】

Bootstrapで折りたたみメニューを作ろうとしたら、こんなことがありました。

折りたたみメニューを閉じた時、カクつく

はじめは「直らないのかな」と思いましたが、実は対処法は簡単でした。
今回はそんなカクつく際の対処法を解説します。

スポンサーリンク

カクつく原因

僕が初めにやっていたことはこちら

<div class="collapse" id="collapseExample1">
<p>
ここにテキストを入れる
</p>
</div>

カクつく原因としては、paddingがうまく指定できていなく、
余白がなかったためカクついてしまいました。

対処法としては、paddingを指定して余白をつくることです。
結論として、下記のコードをコピーすればOKです。

スポンサーリンク

HTMLコード

<div class="collapse" id="collapseExample1">
<div class="example">
<p>
ここにテキストを入れる
</p>
</div>
</div>

スポンサーリンク

CSSコード

.example {
 padding:1em;
}

collapseの直下ではなく、いったんdivタグをはさみ、
そこにexampleというクラスを入れてpaddingを指定してあげれば、カクつきが直ります。

すごく簡単ですよね。
それでは!