Question

我正在尝试在bootstrap中创建一个tile网格，当单击它时会扩展tile下方标题的细节 - 无论视口大小如何。

这就是我目前所拥有的 - 在桌面视图中可以很好地连续使用4个标题框： http://www.bootply.com/WYywmfHzSZ

单击标题时，描述将显示在切片行下方。

但是，在平板电脑或手机中查看时，标题框会垂直堆叠，这会导致相应的说明在所点击的标题下方出现几个项目。我想始终在点击的标题框下方显示说明。

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

有什么想法吗？

Answer 1

这是一个sample of one possible solution。单击全屏预览，看看它在超小窗口宽度下的作用。

我对此并不是非常热衷，因为它需要复制不同屏幕尺寸的描述，但我不确定如何在不用javascript重写dom的情况下解决这个问题。

来自该bootply的相关代码位是：

<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 tile网格

1 个答案: