[英]With Bootstrap 4, how can I collapse sidebar in mobile/tablet view
我希望在创建可折叠的侧边栏时获得一些帮助,该侧边栏可以在lg和更高的视图上展开,但是通过(现在可见)按钮折叠起来可以在平板电脑和移动设备视图(md或更小)上展开。
因此,请分解:-如何在移动设备/平板电脑视图上折叠边栏? (xs,md,lg)-需要在桌面视图中进行扩展(lg,xl)-并且具有一个切换按钮,该按钮隐藏在大型桌面视图中,但显示在小型移动/平板电脑视图中。 -我需要写一些自定义JS吗? -这里链接的是BS4折叠文档,但我不知道这将如何完成我需要的工作( https://getbootstrap.com/docs/4.0/components/collapse/#options )。 也许一个JS人员可以提供帮助。
谢谢您的帮助!
//The Button
<h4 class="mb-3"><span class="text-muted">Search Filters</span>
<button class="navbar-toggler border"
type="button"
data-toggle="collapse"
data-target="#sidebar"
aria-expanded="false"
aria-label="Toggle filters">
<span><i class="fas fa-filter"></i></span>
</button>
</h4>
//The Sidebar
<ul id="sidebar" class="list-group mb-3">
<li class="list-group-item d-flex justify-content-between lh-condensed">
<div>
<h6 class="my-0">Header</h6>
<div class="input-group mb-3">
<ul>
<li><input type="checkbox" aria-label="Checkbox"> Checkbox List Item </li>
<li><input type="checkbox" aria-label="Checkbox"> Checkbox List Item </li>
<li><input type="checkbox" aria-label="Checkbox"> Checkbox List Item </li>
<li><input type="checkbox" aria-label="Checkbox"> Checkbox List Item </li>
<li><input type="checkbox" aria-label="Checkbox"> Checkbox List Item </li>
</ul>
</div>
</li>
<li class="list-group-item d-flex justify-content-between lh-condensed">
<div>
<h6 class="my-0">Header</h6>
<div class="input-group mb-3">
<ul>
<li><input type="checkbox" aria-label="Checkbox"> Checkbox List Item </li>
<li><input type="checkbox" aria-label="Checkbox"> Checkbox List Item </li>
<li><input type="checkbox" aria-label="Checkbox"> Checkbox List Item </li>
<li><input type="checkbox" aria-label="Checkbox"> Checkbox List Item </li>
<li><input type="checkbox" aria-label="Checkbox"> Checkbox List Item </li>
</ul>
</div>
</li>
<li class="list-group-item d-flex justify-content-between lh-condensed">
<div>
<h6 class="my-0">Header</h6>
<div class="input-group mb-3">
<ul>
<li><input type="checkbox" aria-label="Checkbox"> Checkbox List Item </li>
<li><input type="checkbox" aria-label="Checkbox"> Checkbox List Item </li>
<li><input type="checkbox" aria-label="Checkbox"> Checkbox List Item </li>
<li><input type="checkbox" aria-label="Checkbox"> Checkbox List Item </li>
<li><input type="checkbox" aria-label="Checkbox"> Checkbox List Item </li>
</ul>
</div>
</li>
</ul>
</div>
好吧,在其他网站上的一些帮助下,我找到了解决方案。 通过链接StackOverflow线程 , Slack Bootstrap帮助通道上的家伙们很友好地将我指向正确的方向。
使用该链接以及Bootstrap上的Collapse Documentation,我能够弄清楚。 以下是答案...
// Used jQuery to create the new logic:
if ($(window).width() < 922) {
$('#sidebar').collapse({
toggle: false
});
} else {
$('#sidebar').collapse({
toggle: true
});
}
// Also, needed to add the .collapse class to the UL:
<ul id="sidebar" class="collapse list-group mb-3">
....
</ul>
希望这对其他人有帮助!
无需使用JS,使用Bootstrap类: https : //getbootstrap.com/docs/4.1/utilities/display/#hiding-elements
您可以这样做:
//按钮:d-lg-none类将隐藏较大尺寸的过滤器(即:仅在xs-s-md尺寸上可见)
<h4 class="d-lg-none mb-3"><span class="text-muted">Search Filters</span>
<button class="navbar-toggler border"
type="button"
data-toggle="collapse"
data-target="#sidebar"
aria-expanded="false"
aria-label="Toggle filters">
<span><i class="fas fa-filter"></i></span>
</button>
</h4>
//The Sidebar : "d-none d-lg-block" will display the sidebar only on large size
<ul id="sidebar" class="d-none d-lg-block list-group mb-3">
....
</ul>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.