Question

我试图将一个实时聊天窗口小部件（Chatlio.com）添加到div（总共3个div）到我在localhost上的Bootstrap项目中：

<div id="chatlioWidgetPlaceholder" style="margin: auto; height:400px; width:100%;"></div>

聊天显示在桌面视图上，功能齐全，并在左下角的div中正确显示：

...但是一旦我使用检查员＆＃34;设备模式＆＃34;进入移动视图，聊天就不会显示，我看不出原因为什么！

我有桌面和移动视图的单独包装（由于在Bootstrap中div的想要行为，我在桌面视图的Div 2和移动视图中的Div 1中有聊天小部件）并且不确定这是否是什么原因它

我已将所有HTML和CSS放在此链接中：https://jsfiddle.net/wLnxgo69/

Answer 1

我有桌面和移动视图的独立包装（由于想要在Bootstrap中使用div的行为我在Div中有聊天小部件 2在桌面视图和移动视图中的Div 1中）并且不确定是否是是什么导致它。

是的，可能是。我在Chatlio文档中看不到它是如何初始化的，但我猜测代码可能看起来像（jQuery）

$('#chatlioWidgetPlaceholder').chatlio();

这只会在页面上的第一个#chatlioWidgetPlaceholder（桌面版）上初始化Chatlio。

我的直觉是清理HTML，因此你不需要两个包装器 - 从长远来看，代码很难维护 - 但如果没有，你可能会看到Chatlio是否允许你定位一个元素按类而不是ID，或者您可能只需要第二个小部件。

Answer 2

有一个chatlio.ready事件的代码示例，我想说明了将聊天窗口小部件从一个DOM容器移动到另一个容器所需要做的事情：https://chatlio.com/docs/api-v1/#api-custom-events-ready - 这就是你需要的吗？ / p>

你的小提琴不包含嵌入代码直接使你有点难以帮助你;如果以上不起作用，你介意添加吗？