我想创建一个可折叠的侧边栏,在大屏幕(lg及以上)上展开,但在平板电脑和移动设备上(md或更小)折叠,并有一个(现在可见的)按钮来展开。
如何使我的侧边栏在移动/平板视图下可折叠?(xs、md、lg) 它需要在桌面视图(lg、xl)中展开,并且具有在大型桌面视图中隐藏但在小型移动/平板视图中显示的切换按钮。
我需要编写一些自定义JS吗?
这里链接了BS4 Collapse文档,但我不明白它如何实现我所需的功能。(https://getbootstrap.com/docs/4.0/components/collapse/#options)
如何使我的侧边栏在移动/平板视图下可折叠?(xs、md、lg) 它需要在桌面视图(lg、xl)中展开,并且具有在大型桌面视图中隐藏但在小型移动/平板视图中显示的切换按钮。
我需要编写一些自定义JS吗?
这里链接了BS4 Collapse文档,但我不明白它如何实现我所需的功能。(https://getbootstrap.com/docs/4.0/components/collapse/#options)
//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>