[英]How to auto collapse Bootstrap 4 Sidebar for smaller screens?
这是我当前的代码,我已经设法通过折叠按钮隐藏了侧边栏,但是我只希望它像小型设备的navbar那样在小型设备上折叠。
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div class="container-fluid"> <div class="row"> <div class="col-md-3 px-1 bg-light" id="sidebar"> <div class="py-2 sticky-top flex-grow-1"> <div class="nav flex-sm-column"> <h2 class="text-center">PROFILE</h2> <button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".collapse" aria-expanded="true" aria-controls="collapse">Toggle both elements</button> <div class="collapse navbar-collapse"> <a href="" class="nav-link">LINK</a> <a href="" class="nav-link">LINK</a> <a href="" class="nav-link">LINK</a> </div> </div> </div> </div> <div class="col-sm-9" id="main"> ***PAGE DATA </div> </div> </div> </div>
您可以使用媒体查询来执行此操作:
@media (max-width: 568px) {
#sidebar {
display: none;
}
}
我认为,如果您使用此功能,将有助于解决您的问题。 您可以从这里了解更多W3SCHOOLS
@media only screen and (min-width: 320px) and (max-width: 768px) {
.nav {
width:100%;
}
.nav-link {
width:100%;
float:none;
}
}
这就是您要寻找的。 上面其他人写的东西可以工作,但是比仅仅使用引导分类更难。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.