Bootstrap折叠div默认展开问题：如何设置初始关闭

嘿，我一眼就揪出问题所在啦！你的折叠面板一开始就处于展开状态，是因为目标折叠<div>的class里多了个show——这个类正是Bootstrap用来标记组件默认展开的关键。

看你代码里的这一行：

<div id="collapseOne2" class="collapse show" data-parent="#accordion">

解决方法超简单： #

只需要把show类从这个div的class列表里移除，组件初始状态就会自动变成关闭的了。

修改后的完整代码如下：

<div class="card"> 
  <div class="card-header bg-danger"> 
    <a class="card-link text-dark" data-toggle="collapse" href="#collapseOne2">
      <span class="fas fa-newspaper solid size-1x"></span> News
    </a> 
  </div> 
  <div id="collapseOne2" class="collapse" data-parent="#accordion"> 
    <div class="card-body"> 
      Cras eu est tortor. Maecenas varius massa arcu, quis hendrerit nulla molestie id. Maecenas non lorem ex. Morbi malesuada augue ut magna lacinia, eu scelerisque erat hendrerit. Duis mattis lorem velit, sed dictum velit mattis scelerisque. Fusce ut lacus eu nulla vestibulum vehicula. Pellentesque diam ante, aliquam pretium quam sit amet, vestibulum mattis neque. Cras eu est tortor. Maecenas varius massa arcu, quis hendrerit nulla molestie id. Maecenas non lorem ex. Morbi malesuada augue ut magna lacinia, eu scelerisque erat hendrerit. Duis mattis lorem velit, sed dictum velit mattis scelerisque. Fusce ut lacus eu nulla vestibulum vehicula. Pellentesque diam ante, aliquam pretium quam sit amet, vestibulum mattis neque.
    </div> 
  </div> 
</div>

现在这个折叠组件会默认保持关闭状态，点击头部的"News"链接就能正常切换展开/折叠啦。

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