javascript - Bootstrap - 单击图标以在图标下显示信息框

Question

如果之前有人问过，我深表歉意。我不太确定我正在寻找的操作的术语是什么，因此事实证明搜索它很困难。

我有一个图标网格。当用户单击某个图标时，我希望在该图标下方出现一个对话框，其中包含我为该图标编写的内容。 (我已经绘制了这个场景的基本图，但我没有足够的代表来张贴图片)

0 0 0 0
0 0 0 0

所以假设每个“0”都是一个图标，我有一个 4x2 图标的网格。单击第一行中的任何图标将创建一个对话框 ([ _ _ _])，每个图标具有独特的内容，向下推第二行图标。有点像图标下方出现的对话泡泡。

0 0 0 0
[ _ _ _]
0 0 0 0

点击第二行的图标应该使网格看起来像这样:

0 0 0 0
0 0 0 0
[ _ _ _]

目前，我有这样的事情:

<div class="col-md-3" data-toggle="collapse" data-target="#demo1">
    <img src="...">
</div>

<div class="col-md-3" data-toggle="collapse" data-target="#demo2">
    <img src="...">
</div>

<div class="col-md-3" data-toggle="collapse" data-target="#demo3">
    <img src="...">
</div>

<div class="col-md-3" data-toggle="collapse" data-target="#demo4">
    <img src="...">
</div>

<div id="demo1" class="collapse">
    <p>
          Description belonging to the first icon
      </p>
</div>

<div id="demo2" class="collapse">
    <p>
        Description belonging to the second icon
   </p>
</div>

(等)

这段代码的结果有两点(我可以看到)。1.信息框的位置是硬编码的。如果在较小的屏幕上，我想将图标排列成 3 行，这意味着信息框将出现在错误的位置。

还有 2. 现在，当我点击显示信息框时，我的页面高度下降了很多，信息出现了，然后页面的高度再次弹回，达到了我的预期成为。

还有一件事我要注意，我希望这个信息框跨越包含 div/parent div 的整个区域，所以即使图像在 col-md-3 中，我也希望信息框是 col-md -12.

编辑:

我想要的:不管一行中有多少个图标，在一行图标下面出现一个信息框，并且这个框的显示不会导致页面高度大幅跳动数量，然后恢复到预期大小。

我想要的图像:http://s3.postimg.org/fnhz2w4jn/icons.png

Answer 1

如果您的信息框 div 并不严格需要显示在行内和下方，而是如果它可以显示为图标下方的叠加层，请使用 bootstrap popover 查看，在你的情况下 placement="bottom".

您需要对相关弹出框的 CSS 进行简单调整，以达到所需的宽度。

这个:

1. 将消除您“神经质”的顾虑
2. 无论每行使用多少个图标都有效
3. 在设计和用户体验方面更具现代感
4. 是受支持的、开箱即用且易于编码的可能解决方案