使用 bootstrap 与 Microsoft WebChat 打破聊天气泡

Question

我想将 webchat 插件与 Bootstrap 一起使用 4. 一旦我将 webchat 放入带有 Bootstrap 的站点，聊天框就会在两侧被剪裁。

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

例如，在所附图片上，左边的聊天被剪掉了。文本应该说 "Just now" 但实际上是 "st now"。

如果我在没有 bootstrap 的普通 HTML 站点中使用网络聊天脚本，那么它会按预期工作。

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

Answer 1

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

#webchat .row {
  margin: 0;
}

希望对您有所帮助！