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

Posted 2023-03-24

【中文标题】使用 Bootstrap 4，如何在移动/平板电脑视图中折叠侧边栏

【英文标题】：With Bootstrap 4, how can I collapse sidebar in mobile/tablet view

【发布时间】：2018-11-09 19:55:34

【问题描述】：

我希望在创建可折叠侧边栏时获得一些帮助，该侧边栏可在 lg 和更高视图上展开，但通过（现在可见）按钮折叠以在平板电脑和移动视图（md 或更小）上展开。

所以分解一下： -如何让我的侧边栏在移动/平板电脑视图上可折叠？ (xs, md, lg) - 需要在桌面视图中展开（lg、xl） - 并有一个隐藏在大型桌面视图中的切换按钮，但显示在小型移动/平板电脑视图中。 - 我需要写一些自定义的 JS 吗？ - 此处链接的是 BS4 Docs for Collapse，但我不明白这将如何满足我的需求 (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>

【问题讨论】：

我为什么会因为提出问题而被否决？我在getbootstrap.com/docs/4.0/components/collapse/#collapseoptions 进行了研究，并试图使问题尽可能清楚。

到目前为止，第一次使用 *** 的体验很差。拒绝投票的人应该强制解释原因，以便提出问题的人可以改进问题并改善自己。现在我只是留在这里摸不着头脑。

你在问“你怎么能做到这一点”。 SO 适用于诸如“我已经尝试过，但结果与预期不符”之类的问题。这就是为什么您会看到很多诸如“SO 不是免费的代码编写服务”之类的 cmets。顺便说一句，我没有投反对票。欢迎来到 SO，它确实帮助了我很多次！

很好，感谢您的反馈。你说的有道理！我快到了，但我有一些奇怪的行为。感谢您的回复，我将考虑到这一点来编辑和重组我的问题。谢谢！

【参考方案1】：

好吧，在其他网站上的一些帮助下，我找到了解决方案。 Slack Bootstrap 帮助频道的人很友好地通过链接 *** thread 为我指明了正确的方向。

使用该链接以及Bootstrap 的折叠文档，我能够弄清楚。下面是答案...

// 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>

我希望这对其他人有帮助！

【参考方案2】：

不用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>

【讨论】：

嗨，伊格纳西奥。我也在尝试使用 bootstrap 4 类来解决这个问题。我什至看到了一个工作示例here，这正是这里讨论的内容。但我无法弄清楚如何使它工作。如我所见，关键是，当您将侧边栏设置为小屏幕隐藏时，切换功能不起作用。 （我想这是“折叠秀”和“d-none”类之间的风格冲突，但我不确定）任何澄清将不胜感激

不要在侧边栏使用“d-none”类，而是使用“collapse”类。代码将是： ... 。我刚刚测试过，它可以工作。您可以阅读与折叠相关的文档getbootstrap.com/docs/4.3/components/collapse

嗨@Ignacio，谢谢你的回答。您的解决方案与我的完全相反。我明白你的意思，但它有一个类似的问题。我在小屏幕上显示侧边栏时遇到问题，根据您的建议，我在隐藏宽屏幕侧边栏时遇到问题。我想完成与提供的链接类似的事情：在小屏幕上折叠并在更大的屏幕上展开，但在这两种情况下都可以通过单击按钮来隐藏/显示。也许使用自定义 js 是唯一的方法。有什么想法吗？谢谢！ :)

好的。您需要一直显示按钮。正确的？要在大屏幕上显示按钮，您需要从按钮中删除类 d-lg-none（这是隐藏它）。按钮的代码是