[英]With Bootstrap 4, how can I collapse sidebar in mobile/tablet view
I was hoping to get some help on creating a collapsible sidebar that is expanded on lg and higher views, but is collapsed with a (now visible) button to expand on tablet and mobile views (md or smaller). 我希望在创建可折叠的侧边栏时获得一些帮助,该侧边栏可以在lg和更高的视图上展开,但是通过(现在可见)按钮折叠起来可以在平板电脑和移动设备视图(md或更小)上展开。
So break it down: -How would I make my sidebar collapsible on mobile/tablet views? 因此,请分解:-如何在移动设备/平板电脑视图上折叠边栏? (xs, md, lg) -It need to be expanded in desktop views (lg, xl) -And have a toggle button that's hidden in large desktop views, but displays in small mobile/tablet views.
(xs,md,lg)-需要在桌面视图中进行扩展(lg,xl)-并且具有一个切换按钮,该按钮隐藏在大型桌面视图中,但显示在小型移动/平板电脑视图中。 -Do I need to write some custom JS?
-我需要写一些自定义JS吗? -Linked here are the BS4 Docs for Collapse, but I didn't understand how this would do what I need ( https://getbootstrap.com/docs/4.0/components/collapse/#options ).
-这里链接的是BS4折叠文档,但我不知道这将如何完成我需要的工作( https://getbootstrap.com/docs/4.0/components/collapse/#options )。 Maybe a JS person could help.
也许一个JS人员可以提供帮助。
Thank you for your help! 谢谢您的帮助!
//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>
Well, with some help on other websites I figured out the solution. 好吧,在其他网站上的一些帮助下,我找到了解决方案。 The guys at the Slack Bootstrap Help Channel were kind enough to point me in the right direction by linking a StackOverflow thread .
通过链接StackOverflow线程 , Slack Bootstrap帮助通道上的家伙们很友好地将我指向正确的方向。
Using that link along with the Collapse Documentation at Bootstrap I was able to figure it out. 使用该链接以及Bootstrap上的Collapse Documentation,我能够弄清楚。 Below is the answer...
以下是答案...
// 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>
I hope this helps others! 希望这对其他人有帮助!
No need to use JS, use Bootstrap classes: https://getbootstrap.com/docs/4.1/utilities/display/#hiding-elements 无需使用JS,使用Bootstrap类: https : //getbootstrap.com/docs/4.1/utilities/display/#hiding-elements
You could do this: 您可以这样做:
//The Button: The class d-lg-none will hide the filters for large size (ie: it'll be visible on xs-s-md sizes only) //按钮: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.