javascript - 淡入淡出图像重叠文本

Question

所以我创建了一个在两个图像之间转换的交叉淡入淡出效果。这些图像位于引导列中，文本位于其旁边的另一列中。我的问题是，当浏览器小于 990px​​(宽度)时，引导列不会像预期的那样响应，因为图像位于文本后面而不是文本上方。我知道它与 position: absolute 有关，因为当我将它取出时，它可以正常工作。但是，您需要它才能使交叉淡入淡出工作。

有什么方法可以解决这个问题，可以是在图像之间创建交叉淡入淡出的更好方法，也可以是如何在当前状态下修复它？

https://jsfiddle.net/8kec7wnw/8/

Answer 1

这是因为使用了 col-md-4 和 col-md-8。 Bootstrap 中的这些类会影响 992 像素以上和以下屏幕尺寸的布局。将这些调整为 col-sm-4 和 col-sm-8 以使断点为 768px，或 col-xs-4 和 col-xs-8 将断点设置为移动屏幕及以上。

但是，因为图像是固定宽度的，所以这种布局永远不会真正响应。我建议将图像包含在 Bootstrap 列中，并根据该列设置它们的大小。

设置 img-responsive 的类以确保图像随列调整大小。