将引导程序与Microsoft WebChat结合使用可打破聊天气泡

Question

我想将Webchat插件与Bootstrap 4一起使用。一旦我将Webchat放入具有Bootstrap的站点中，聊天框就会在两侧被剪断。

如果我检查元素，我可以看到溢出被隐藏了。如果将其关闭，则聊天气泡将完全可见，但用户输入将被破坏。

例如，在所附图片上，左侧聊天被裁剪。文字应为“ Just now”，但实际上为“ st now”。

如果我在没有引导程序的纯HTML站点中使用webchat脚本，则它将按预期工作。

我该如何重置样式以使其在Bootstrap 4中起作用？

Answer 1

Bootstrap中的row类似乎与WebChat中的row类冲突。 将其添加到您的CSS中，以防止Bootstrap在Webchat中的行中添加边距：

#webchat .row {
  margin: 0;
}

希望这会有所帮助！