Html 折叠组

我想创建一个包含多个列的表单组行，然后分别折叠每个列，但根据模板，“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/4ydq0upk/23/

u应将数据父级添加到每个折叠列中，并在数据父级中使用父级将它们四舍五入。有关更多详细信息，请参阅引导文档：

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

---

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