如何用Bootstrap 4切换父容器在小屏隐藏的div？

我最近做页面导航遇到个麻烦事儿：

• 大屏设备上，我做了一个导航容器div，里面包含5个子div作为不同的导航板块（如图：大屏导航布局）。为了让这个导航只在大屏及以上设备显示，我给它加了class='d-none d-lg-block'，小屏自动隐藏，这部分倒是没问题。
• 但小屏设备上，我单独做了一个带按钮的div（如图：小屏切换按钮布局），想实现点击按钮就切换显示对应导航板块的内容——比如点Div1按钮，就展示Div1里的Item1和Item2。

我试了好几种方法都没成：先是给每个导航板块加id='div1'这类ID，然后给小屏按钮加class='navbar-toggler'、data-toggle='collapse'和data-target='#div1'，完全没效果；后来又试着在小屏给导航板块手动设display: block，还是不行。现在就想找个优雅的解决办法。

优雅解决方案 #

其实核心是要让Bootstrap的collapse组件正确适配大屏和小屏的状态，这里给你梳理一套可行的步骤：

1. 给导航板块套上collapse容器 #

给每个导航板块外层包裹一个collapse容器，同时加上d-lg-block类——这样大屏设备下这个容器会始终显示，小屏设备下则默认收起，完美契合我们的响应式需求：

<div class="collapse d-lg-block" id="div1">
  <!-- 这里放原来Div1的Item1、Item2内容 -->
</div>

2. 调整小屏按钮的配置 #

小屏的按钮只需要保留data-toggle="collapse"和data-target="#div1"这两个核心属性，同时给按钮加d-block d-lg-none类，确保它只在小屏显示：

<button class="navbar-toggler d-block d-lg-none" type="button" data-toggle="collapse" data-target="#div1">
  Div1
</button>

3. 拆分大屏和小屏的导航容器 #

把大屏导航容器和小屏按钮容器完全分开：

• 大屏导航容器保留d-none d-lg-block，里面放带collapse d-lg-block的各个导航板块；
• 小屏按钮容器加d-block d-lg-none，放所有切换按钮。

这样大屏和小屏的布局互不干扰，各自遵循响应式规则，collapse组件也能正常工作。

为啥之前的方法没用？ #

之前直接给导航板块加ID绑定按钮，但大屏下的导航板块被d-none d-lg-block控制，小屏下本身是隐藏状态，而Bootstrap的collapse组件需要依赖collapse类来管理显示/隐藏逻辑，单纯手动设置display: block会绕过组件的内置机制，自然没效果啦。

内容的提问来源于stack exchange，提问作者Hang Chen