Javascript 引导-网格系统-仅折叠/展开一行中的1项

我在一个网格系统上开发，一行有几个折叠的项目。 单击标题或缩略图时会触发折叠

现在的问题是：当我展开行中的一个项目时，其他项目也会自动展开，但展开的文本仅显示在当前项目中。 我只需要一项展开，其余的在网格系统中自行订购：

本img显示了其当前的行为方式：

这就是我希望它采取的行动：

下面是我当前代码的一部分：

1项的HTML代码（仅因为fiddle需要一些代码）：

虚拟1

虚拟2

虚拟3

提前谢谢

编辑：

---

有更新吗？：）

由于

flex

，您正面临此问题。要解决此问题，您必须使用以下其他选项：

body.flex容器{
显示：块；
}
.项目{
背景色：白色；
边框：实心1px#000；
保证金：5px；
光标：指针；
宽度：100%；
}
.项目.项目正文{
显示：块；
位置：相对位置；
高度：50px；
}
.item.item页脚{
边框顶部：1px实心#000；
位置：相对位置；
填充顶部：10px；
左侧填充：10px；
}
.item.item body.image{
显示：块；
浮动：左；
垂直对齐：中间对齐；
位置：相对位置；
}
.item.item body.image img{
宽度：50px；
垫面：3件；
}
.item.item body.content{
显示：块；
浮动：左；
填充：0；
左边距：10px；
右边距：15px；
}
.项目.项目正文.内容h3{
字体大小：1.1米；
边缘顶部：8px；
边缘底部：1px；
}
.项目.项目正文.内容h4{
字号：1em；
页边顶部：1px；
边缘底部：1px；
}
.item.item body.content.button{
显示：块；
位置：绝对位置；
顶部：3px；
右：5px；
}
.项目a{
文字装饰：无；
颜色：黑色；
}
.柔性容器{
-js显示：flex；
显示器：flex；
柔性包装：包装；
身高：100%；
最小高度：100px；
}

虚拟1

虚拟2

虚拟3

虚拟1

虚拟2

虚拟3

虚拟1

虚拟2

虚拟3

虚拟1

虚拟2

虚拟3

虚拟1

虚拟2

虚拟3

虚拟1

虚拟2

虚拟3

感谢您的快速回复。我已经考虑过这样的解决方案。但问题是，我有大约30个项目要管理——因此我需要将其中几个项目排成一行，否则会让人困惑。你知道怎么做到吗？几乎达到了预期的效果。这个解决方案我只面临一个问题。由于内容重叠，用户无法阅读第1项和第3项的信息。我真的很喜欢网格布局的想法，根据可用的垂直空间将项目放置在最佳位置。（如第二幅图）。但我不知道是否有一个简单的解决方案。这可能是可行的CSS网格，否则你需要一个脚本来解决这个问题。如果CSS网格是一个选项，那么将

CSS网格添加到标记列表im open to everything。我也听说过砌体小部件，但我没有使用它的经验。好吧，我也用脚本更新了你的标记列表，现在就等着瞧吧
<div class="flex-container">
  <div id="item1" class ="item">
     <a data-toggle="collapse" href="#collapse-1" class="collapsed" aria-expanded="false">
            <div class="item-body">
              <div class="image">
                    <img src="https://www.lycatv.tv/img/web/avatar_1.png" alt="Dummy" title="Dummy">          
                </div>

                <div class="content">                                                   
          <h3>TEST</h3>
          <h4>Testmodell 0</h4>
          <div class="btn-group-vertical buttons" role="group" aria-label="...">
                  <button type="button" class="btn btn-default btn-xs"><i class="fa fa-pencil" aria-hidden="true"></i></button>
                  <button type="button" class="btn btn-default btn-xs"><i class="fa fa-info" aria-hidden="true"></i></button>
                    </div>                                  
                </div>
            </div>
      </a>

            <div class="item-footer collapse" id="collapse-1" aria-expanded="false" style="height: 11px;">
              <p><i class="fa fa-ravelry" aria-hidden="true"></i> Dummy 1</p>
        <p><i class="fa fa-ravelry" aria-hidden="true"></i> Dummy 2</p>
                <p><i class="fa fa-ravelry" aria-hidden="true"></i> Dummy 3</p>
            </div>
        </div>
    </div>