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中，我也希望信息框能够被列出来。 -12

编辑： 我拥有的内容：一种“跳跃”的方式来collaspe /展开信息框，这个盒子的位置是硬编码的，因此“行”中的图标数量不能改变

我想要的内容：无论一行中的图标数量如何，一行图标下都会显示一个信息框，并且显示此框不会导致页面高度大幅跳跃金额，然后快速恢复到预期的大小。

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

Answer 1

如果您的信息框div不一定要在内嵌和下方显示，而是在图标下方显示为叠加层，请使用bootstrap popover结帐，在您的情况下使用placement =“bottom”。

您需要在相关的弹出窗口的CSS中进行简单调整才能达到所需的宽度。

此：

将消除您的“跳跃”问题
都能正常工作
在设计和用户体验方面更具现代感
是受支持的，开箱即用且易于编码的可能解决方案

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

1 个答案: