在表单组中折叠

Posted 2023-03-24

【中文标题】在表单组中折叠

【英文标题】：Collapse in form-group

【发布时间】：2019-01-06 02:58:21

【问题描述】：

我想创建一个包含多列的表单组行，然后分别折叠每一列，但根据模板，“div class="collapse" 必须保持在 "div class="form group row" 之上阻止我将标记单独的列折叠起来。 编辑：一个按钮不能折叠两个单独的元素（1.标签2.输入）。下面的代码仅显示了如何使用两个按钮来完成。有没有更简单的方法可以让一个按钮同时折叠标签和输入？

  <div class="form-group row">
<label for="Payment1" class="col-sm-1 col-form-label">Payments:</label>
  <div class="col-sm-3">
    <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample1" role="button" aria-expanded="false" aria-controls="collapseExample1">
      Payment 1
    </a>     

    <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample2" role="button" aria-expanded="false" aria-controls="collapseExample2">
      Payment 2
    </a>

  </div>

付款1：

https://jsfiddle.net/Dexter666/4ydq0upk/

【参考方案1】：

请参考我对您的案例的修复：

https://jsfiddle.net/4ydq0upk/23/

你应该将 data-parent 添加到每个折叠列，并用 data-parent 中的 parent 将它们四舍五入。请参阅引导文档以获取更多详细信息：

https://getbootstrap.com/docs/4.0/components/collapse/

【讨论】：

您好，非常感谢您的努力，但手风琴式的折叠不是我需要的。我只需要三个带有标签的单独列，它们应该彼此相邻（不是一个在另一个之下），当我按下按钮 1 时，只有带有标签的第一列消失，当我再次单击它时，它会重新出现，依此类推。所以在某些时候每一列都可以看到。