【发布时间】：2019-12-27 05:08:07
【问题描述】：
我在左侧有一个导航栏和一个侧边栏，我想将其折叠到导航栏作为较小屏幕中的下拉选项。这就是它在大屏幕上的样子
当屏幕尺寸较小时，我希望发生这样的事情
这是我的代码
HTML 正文
<body>
<!-- Navbar -->
<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>
</ul>
</div>
</nav>
<div class="container-fluid flex-grow-1">
<div class="row h-100">
<!-- Sidebar -->
<!-- Collapse as a navbar dropdown in smaller screens -->
<div class="col-lg-3 col-sm-4 sidebar">
<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>
</body>
CSS
html,
body {
height: 100%;
display: flex;
flex-direction: column;
}
.sidebar {
border-right: 1px solid var(--light-grey);
}
.subjects {
user-select: none;
}
.subject {
padding: 15px;
cursor: pointer;
border: 1px solid var(--lighter-grey);
border-radius: 5px;
margin-bottom: 5px;
}
.subject-title {
font-size: 0.8rem;
letter-spacing: 2px;
}
.subject-details {
text-transform: capitalize;
color: var(--gray);
letter-spacing: 2px;
}
.active {
font-size: 1rem;
background-color: var(--lighter-grey);
border-left: 4px solid var(--gray);
padding-left: 12px;
}
.content-container {
background-color: var(--content-bg-grey);
}
到目前为止，我还没有找到一种方法来做到这一点。正确的方法是什么？是否有允许这样做的引导设置，还是我需要使用 JS？如果有帮助的话，我也在使用 jQuery。
谢谢！
【问题讨论】：
标签： html css twitter-bootstrap navbar sidebar