css - 将引导程序与 Microsoft WebChat 结合使用会打破聊天泡沫

Question

我想将 webchat 插件与 Bootstrap 4 一起使用。一旦我将 webchat 放入带有 Bootstrap 的站点，聊天框就会被两边夹住。

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

例如，在所附图片上，左侧聊天被剪辑。文本应该说“Just now”，但实际上读作“st now”。

如果我在没有引导程序的纯 HTML 站点中使用网络聊天脚本，那么它会按预期工作。

我将如何重置样式以使其在 Bootstrap 4 中工作？

Answer 1

看起来rowBootstrap 中的row类与 WebChat 中的类冲突。将此添加到您的 CSS 以防止 Bootstrap 为 Webchat 中的行添加边距：

#webchat .row {
  margin: 0;
}

希望这可以帮助！