我在左侧有一个导航栏和一个侧栏,要在较小的屏幕中作为下拉选项,我想折叠到该导航栏。这是大屏幕上的样子
当屏幕较小时,我希望发生这种情况
这是我的密码
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。
谢谢!
答案 0 :(得分:1)
只需将此添加到您的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>