具有扩展细节的引导平铺网格答案

【问题标题】：Bootstrap tile grid with expanding details具有扩展细节的引导平铺网格
【发布时间】：2015-06-03 23:40:42
【问题描述】：

我正在尝试在引导程序中创建一个磁贴网格，单击该网格时将展开磁贴下方标题的详细信息 - 无论视口大小如何。

这是我目前拥有的 - 在桌面视图中效果很好，连续 4 个标题框： http://www.bootply.com/WYywmfHzSZ

单击标题时，说明会显示在磁贴行下方。

但是，在平板电脑或移动设备上查看时，标题框会垂直堆叠，这会导致相应的描述出现在点击的标题下方的几个项目中。我想始终在单击的标题框下方显示描述。

这是一个直观的解释： http://tinypic.com/r/s285qo/8

有什么想法吗？

【问题讨论】：

标签： twitter-bootstrap twitter-bootstrap-3 grid collapse expand

【解决方案1】：

这是sample of one possible solution。点击全屏预览，看看它在超小窗口宽度下的效果。

我对此并不热衷，因为它需要为不同的屏幕尺寸复制描述，但我不确定如果不使用 javascript 重新编写 dom，你是如何解决这个问题的。

该引导程序中的相关代码位是：

<div class="row">
  <div class="col-xs-12 col-sm-4 col-md-3">
    <!-- changed the target to a class instead of id to allow for multiple targets -->
    <div class="title"><a data-toggle="collapse" href=".description-1">TITLE 1</a></div>
  </div>
  <!-- this one for extra small displays only -->
  <div class="col-xs-12 collapse description hidden-sm hidden-md hidden-lg description-1" id=""> DESCRIPTION 1. Lorem ipsum ...consequat. </div>

下面的行...

<div class="row">
  <!-- added hiddden-xs to hide this one on xtra small screeens -->
  <div class="col-xs-12 collapse description description-1 hidden-xs" id=""> DESCRIPTION 1. Lorem ipsum ...consequat. </div>

HTH...欢迎堆栈溢出 :)

【讨论】：

谢谢，泰德 - 为您的建议和欢迎。我是一个长期的读者，但第一次海报。我考虑过这种方法（重复的细节部分），但我真的想尽量保持代码尽可能干净和轻量级。我一直在尝试用 Bootstrap 的原生 JS 来解决这个问题，但我想我可能需要编写一些自定义脚本来处理它。我发现这段代码完全符合我的要求，但需要引入很多额外的代码：tympanus.net/codrops/2013/03/19/…
是的，这是一个很难解决的问题。如果您想出一个好的解决方案，请务必在此处发布。