Bootstrap 4折叠在flex中使用时不起作用答案

【问题标题】：Bootstrap 4 collapse not working when used in a flexBootstrap 4折叠在flex中使用时不起作用
【发布时间】：2018-12-29 07:40:36
【问题描述】：

我在 Bootstrap 4 崩溃时遇到问题。如果我不在表单标签中使用“d-flex”类，它工作得很好。

但是，如果我使用“d-flex”，则默认情况下会显示该表单。单击#reservas_button 时，表单将切换为隐藏，然后返回显示。

    <!--reservas-->
<div id="reservas" class="container d-flex flex-column flex-sm-row align-items-center align-items-sm-start">
  <h2 id="reservas_button" data-toggle="collapse" href="#reservas_form">RESERVAS</h2>
  <form id="reservas_form" class="collapse d-flex flex-wrap">

    ...

</div>
<!--/reservas-->

【问题讨论】：

标签： jquery css flexbox bootstrap-4

【解决方案1】：

将带有 display flex 的 div 放入一个 wrapper 并折叠 wrapper（另一个 div），效果很好。

【讨论】：

【解决方案2】：

不要在表单标签中使用 d-flex。它很可能会覆盖崩溃。如果你省略 d-flex，你的 sn-p 就可以工作。

【讨论】：

这就是我试图找到解决方案的问题。我更喜欢使用引导程序中的内置函数。如果不可能，那么我可以尝试改用自定义 Jquery。任何替代解决方案？
为什么在表单中又需要一个 d-flex？它将从容器中继承它。您可以继续在容器 div 中使用 d-flex。如果您仅从表单中删除它，我看不到任何变化
感谢您的回复。我离开了一段时间。我会检查这个。谢谢！

【解决方案3】：

尝试添加以下内容：

style="display:flex;"

而不是你课堂上的d-flex。

【讨论】：