使用Bootstrap 4,如何在移动/平板视图中折叠侧边栏?

3
我想创建一个可折叠的侧边栏,在大屏幕(lg及以上)上展开,但在平板电脑和移动设备上(md或更小)折叠,并有一个(现在可见的)按钮来展开。
如何使我的侧边栏在移动/平板视图下可折叠?(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>

1
为什么我提问后被投票否决了?我已经在https://getbootstrap.com/docs/4.0/components/collapse/#collapseoptions进行了研究,并尽可能清晰地提出了问题。 - J-Snor
到目前为止,我对Stackoverflow的第一次体验非常糟糕。在给问题投反对票时,应该强制要求解释原因,这样提问者才能改进问题并提高自己。现在我只能一头雾水地待在这里。 - J-Snor
你正在询问“你怎么做到这个”。SO适用于像“我尝试过这个,但结果并不如预期”的问题。这就是为什么你会看到很多评论说“SO不是一个免费的代码编写服务”。顺便说一下,我没有给你点踩。欢迎来到SO,在之前它确实帮助了我很多次! - Cagy79
很好,我感谢你的反馈。你说的很有道理!我已经接近成功了,但是出现了一些奇怪的行为。多亏了你的回复,我会根据那个来编辑和重组我的问题。非常感谢! - J-Snor
2个回答

2
好的,通过其他网站的帮助,我找到了解决方案。在Slack Bootstrap 帮助频道上的人们非常友善地向我指出了正确的方向,并链接了一个StackOverflow线程
使用该链接以及在Bootstrap上的Collapse文档,我成功地解决了问题。以下是答案...
// 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>

我希望这能帮助其他人!

0

不需要使用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>

嗨Ignacio。我也在尝试使用Bootstrap 4类来处理这个问题。我甚至看到了一个可行的示例在这里,完全符合我们讨论的内容。但是我还没有找到如何使其正常工作的方法。据我所见,关键点在于,当你将侧边栏设置为在小屏幕上隐藏时,切换功能就无法正常工作。(我猜测这可能是“collapse show”和“d-none”类之间的样式冲突,但我不确定)如果能有任何解释,我将不胜感激。 - serguitus
1
不要在侧边栏上使用"class"为"d-none"的类,而是使用"class"为"collapse"的类。代码如下:<ul id="sidebar" class="collapse d-lg-block">...</ul>。我刚刚测试过,它可以正常工作。你可以阅读与折叠相关的文档https://getbootstrap.com/docs/4.3/components/collapse/。 - Ignacio
嗨@Ignacio,谢谢你的回答。你的解决方案与我的完全相反。我明白你的意思,但它也存在类似的问题。在小屏幕上显示侧边栏时我遇到了问题,而按照你的建议,在宽屏幕上隐藏侧边栏也有问题。我想实现与提供的链接类似的效果:在小屏幕上折叠,在大屏幕上展开,但无论哪种情况下都可以通过点击按钮来隐藏/显示。也许使用自定义js是唯一的方法。你有什么想法吗?谢谢! :) - serguitus
嗨serguitus。你可以为大屏幕重新编写一些类,试试这个:@media (min-width: 992px) { .collapse:not(.show) { display: block; } .collapse { display: none; } } - Ignacio
不适用于切换按钮(折叠类) - TomSawyer
显示剩余2条评论

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接