使用bootstrap 4在插入符号上嵌套下拉列表

Question

我有一个嵌套的元素列表，感谢这个html：

 <div class="modal-body modal-scroll">
    <ul>
        <li>
        <i class="far fa-folder"></i> .git <i class="fas fa-caret-down"></i>
            <ul>
                <li>
                    <i class="far fa-folder"></i> logs <i class="fas fa-caret-down"></i>
                    <ul>
                        <li>
                            <i class="far fa-folder"></i> refs <i class="fas fa-caret-down"></i>
                            <ul>
                                <li>
                                    <i class="far fa-folder"></i> remotes
                                </li>
                                <li>
                                    <i class="far fa-folder"></i> heads
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li>
                    <i class="far fa-folder"></i> branches
                </li>
                <li>
                    <i class="far fa-folder"></i> objects <i class="fas fa-caret-down"></i>
                    <ul>
                        <li>
                            <i class="far fa-folder"></i> pack
                        </li>
                        <li>
                            <i class="far fa-folder"></i> info
                        </li>
                    </ul>
                </li>
                <li>
                    <i class="far fa-folder"></i> refs <i class="fas fa-caret-down"></i>
                    <ul>
                        <li><
                            i class="far fa-folder"></i> remotes <i class="fas fa-caret-down"></i>
                            <ul>
                                <li>
                                    <i class="far fa-folder"></i> origin
                                </li>
                            </ul>
                        </li>
                        <li>
                            <i class="far fa-folder"></i> tags
                        </li>
                        <li>
                            <i class="far fa-folder"></i> heads
                        </li>
                    </ul>
                </li>
                <li>
                    <i class="far fa-folder"></i> hooks
                </li>
                <li>
                    <i class="far fa-folder"></i> info
                </li>
            </ul>
        </li>
    </ul>
</div>

看起来像这样：

问题是这种显示器很快就会占用太多空间。 这就是为什么我试图让每个子目录都成为其父级的下拉列表，并且可以通过单击其父插入符来显示它，而不是名称。

我尝试使用Boostrap 4 Dropdown，但没有设法做到正确。

关于如何进行的任何想法？