时间戳

首页 > 解决方案 > 在表单组中折叠

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/Dexter666/4ydq0upk/

标签： htmlcssbootstrap-4

解决方案

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

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

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

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

推荐阅读