我在左侧有一个导航栏和一个侧边栏，我想在较小的屏幕中将其折叠到导航栏作为下拉选项。这是它在大屏幕上的样子
当屏幕尺寸很小的时候，我希望这样的事情发生
这是我的代码
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);
}
就我的搜索而言，我目前还找不到执行此操作的方法。正确的方法是什么？是否有允许这样做的 Bootstrap 设置，或者我需要使用 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>
关于html - Bootstrap 4 将侧边栏折叠成导航栏下拉菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59490273/