第4レベルの見出しでインデントが1レベル不足しています

DiscoTOC コンポーネントの使用中に問題が発生しました。
右側のスクロールバーにある第 4 レベルの見出しは、第 3 レベルの見出しと比較して、インデントが 1 レベル不足しているようです。

元のテキストを確認しましたが、構文エラーは見つかりませんでした。
image

この原因について説明していただけますでしょうか?また、この問題に対する解決策はありますでしょうか?

「いいね!」 1

インデントが多すぎる場合に目次内のタイトルが縮小されないように意図的に行われているのだと思います。

インクリメンタルパディングを実現する最も簡単な方法は、<li> または <a> のいずれか(見出しレベルに関連するクラスがあるため、それらのクラスを使用)をターゲットにして、padding-left を追加することです。

ご返信ありがとうございます!

しかし、このソリューションを実装するにはHTMLコードを変更する必要がありますか?この問題に対処するための、より具体的なガイダンスを提供していただけますか?

<h3>から<h5>までのタイトルは目次で折りたたむことができません。この動作を許可するにはコンポーネントを変更する必要があります。<h6>はコンポーネントによって無視されます。

しかし、ネストについてのみ話しているため、このSCSSで十分です。

.d-toc-main #d-toc li.d-toc-item {
    .d-toc-h4 {
        padding-left: 1.25em;
    }
    .d-toc-h5 {        
        padding-left: 2em;
    }
}

「いいね!」 2

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.