Html 引导4将侧边栏折叠为导航栏下拉列表

我在左边有一个导航栏和一个侧边栏，我想在较小的屏幕中作为下拉选项折叠到导航栏。这就是它在大屏幕上的样子

当屏幕很小的时候，我希望这样的事情发生

这是我的密码

HTML正文

学科


数学
X教授|
113房间


科学类
Y教授|
111房间


英语
Z教授|
130房间


uwu

CSS

html，
身体{
身高：100%；
显示器：flex；
弯曲方向：立柱；
}
.侧边栏{
右边框：1px实心变量（--浅灰色）；
}
.科目{
用户选择：无；
}
.主题{
填充：15px；
光标：指针；
边框：1px实心变量（--浅灰色）；
边界半径：5px；
边缘底部：5px；
}
.主题名称{
字体大小：0.8rem；
字母间距：2px；
}
.主题详情{
文本转换：大写；
颜色：var（--灰色）；
字母间距：2px；
}
.主动{
字号：1rem；
背景色：var（--浅灰色）；
左边框：4px实心变量（--灰色）；
左侧填充：12px；
}
.内容容器{
背景色：var（--含量bg灰色）；
}

到目前为止，我还没有找到一种方法来做这件事。正确的方法是什么？是否有一个引导设置允许这样做，或者我需要使用JS？如果这有帮助的话，我也在使用jQuery

---

谢谢

只需将其添加到html代码中即可

<nav class="navbar navbar-expand-md navbar-dark bg-dark py-2">
    <a class="navbar-brand" href="#">CDR</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
        aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item">
                <a class="nav-link" href="#">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Login</a>
            </li>
            <!-- this will appear only in small screen -->
            <li class="nav-item dropdown d-md-none">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                    data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Subjects
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="#">Mathematics</a>
                    <a class="dropdown-item" href="#">Science</a>

                    <a class="dropdown-item" href="#">English</a>
                </div>
            </li>
        </ul>
    </div>
</nav>
<div class="container-fluid flex-grow-1">
    <div class="row h-100">

        <!-- Sidebar -->
        <!-- Collapse as a navbar dropdown in smaller screens -->
        <!-- i was added two classes (d-md-block d-none) -->
        <div class="col-lg-3 col-sm-4 sidebar d-md-block d-none">
            <div class="sidebar-container mt-4 mx-2">
                <h4 class="text-capitalize py-2">Subjects</h4>
                <ul class="nav flex-column subjects">
                    <li class="subject" data-subject="mathematics">
                        <h5 class="subject-title mb-1">Mathematics</h5>
                        <h6 class="subject-details m-0">
                            <span class="teacher">Prof X.</span> |
                            <span class="room">Room 113</span>
                        </h6>
                    </li>
                    <li class="subject" data-subject="science">
                        <h5 class="subject-title mb-1">Science</h5>
                        <h6 class="subject-details m-0">
                            <span class="teacher">Prof Y.</span> |
                            <span class="room">Room 111</span>
                        </h6>
                    </li>
                    <li class="subject" data-subject="english">
                        <h5 class="subject-title mb-1">English</h5>
                        <h6 class="subject-details m-0">
                            <span class="teacher">Prof Z.</span> |
                            <span class="room">Room 130</span>
                        </h6>
                    </li>

                </ul>
            </div>
        </div>

        <!-- Content -->
        <div class="col-lg-9 col-sm-8 content-container">
            <div class="row h-100">
                <div class="col-lg-9 col-md-9 col-sm-12 main-container"></div>
                <div class="col-lg-3 col-md-3 d-none d-md-block announcement-container">uwu</div>
            </div>
        </div>
    </div>
</div>

学科


数学
X教授|
113房间


科学类
Y教授|
111房间


英语
Z教授|
130房间


uwu

请为答案添加一个解释，这将有助于更好地理解解决方案。我被添加到添加代码和类中的注释被添加到创建答案中，但我想知道是否有办法使用我已有的导航栏，因为它将具有动态内容，这意味着在本例中，每当我对侧边栏进行更改时，我还必须更新隐藏的下拉列表。或者这是一个总体上更好的解决方案？