[这里我有2个场景，1）首先是图像1。在那里我每行有4张卡（这将根据屏幕尺寸4-> 2-> 1而改变）。它在各自的类中，如col-lg-3 col-md-6 col-sm-6 col-xs-12，我只有一个html标记来呈现卡片，许多卡片根据后端数据动态显示。< / p>
2）在每张卡片上点击按钮时，它们各自的额外细节将显示在完整行的底部。
这里的问题是因为它在列类中，额外的细节只占用那么多空间（比如父div），我希望它在单行中。 1）http://i.stack.imgur.com/d8xEC.jpg 2）http://i.stack.imgur.com/N8ewg.jpg] 1
答案 0 :(得分：0)
因为它太长了，我创造了一个小提琴：https://jsfiddle.net/gxyud676/1/
我对这个解决方案不太满意，因为它没有响应。 我的第一个想法是只使用bootstrap可折叠功能将卡用作可折叠触发器，并将预览标记放在行外。 但是这种方法会在xs屏幕上打开预览，总是低于第4个元素：
![http://i.stack.imgur.com/N8ewg.jpg]](http://i.stack.imgur.com/N8ewg.jpg]){kind=link}
CARD 1
CARD 2 <-- clicking
CARD 3
CARD 4
PREVIEW for 2
CARD 5
CARD 6
...