如何在Bootstrap 4中实现移动端/平板端侧边栏折叠功能

没问题，用Bootstrap 4的内置工具完全能实现这个需求，不需要写自定义JS，只需要调整几个类就能搞定。我帮你梳理一下步骤：

核心思路 #

利用Bootstrap的响应式显示类和Collapse组件结合：

• 大屏（lg及以上）：侧边栏始终展开，切换按钮隐藏
• 小屏（md及以下）：侧边栏默认折叠，切换按钮显示，点击可展开/收起

修改代码的关键步骤 #

1. 调整侧边栏的类 #

给你的侧边栏#sidebar添加两个类：

• collapse：让元素默认处于折叠状态（小屏时隐藏）
• d-lg-block：在lg及以上尺寸强制显示侧边栏，覆盖collapse的隐藏效果

2. 控制切换按钮的显示 #

给切换按钮添加响应式显示类：d-md-block d-lg-none，这样按钮只在md及以下屏幕显示，lg及以上自动隐藏。

修改后的完整代码 #

<!-- 切换按钮 -->
<h4 class="mb-3">
  <span class="text-muted">Search Filters</span>
  <button class="navbar-toggler border d-md-block d-lg-none" 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>

<!-- 侧边栏 -->
<ul id="sidebar" class="list-group mb-3 collapse d-lg-block">
  <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>
    </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>
    </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>
    </div>
  </li>
</ul>

为什么不需要自定义JS？ #

Bootstrap的Collapse组件已经通过data-toggle="collapse"和data-target="#sidebar"属性实现了切换逻辑，配合响应式显示类，就能自动在不同屏幕尺寸下应用对应的状态，完全不需要额外写JS代码。

内容的提问来源于stack exchange，提问作者J-Snor