Bootstrap CSS 破坏小部件 UI

Question

我们使用 Angular 4 创建了一个可以与任何网站集成的小部件。 但如果托管网站使用 Bootstrap CSS，它会破坏我们的小部件 UI。

当我们在 Angular 4 中构建小部件时，我们会在主机 index.html 中调用以下文件

<script type="text/javascript" src="inline.bundle.js"></script>

<script type="text/javascript" src="polyfills.bundle.js"></script>

<script type="text/javascript" src="scripts.bundle.js"></script>

<script type="text/javascript" src="vendor.bundle.js"></script>

<script type="text/javascript" src="main.bundle.js"></script>

<link href="styles.bundle.css" rel="stylesheet"/>

例如主机 index.html 看起来像这样。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>ChatWidget</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <link href="styles.bundle.css" rel="stylesheet"/></head>
<body>
<!--other host website content-->

  <app-widget></app-widget>

  <script type="text/javascript" src="nline.bundle.js"></script>
  <script type="text/javascript" src="polyfills.bundle.js"></script>
  <script type="text/javascript" src="scripts.bundle.js"></script>
  <script type="text/javascript" src="vendor.bundle.js"></script>
  <script type="text/javascript" src="main.bundle.js"></script>

</body>
</html>

所以我的问题是如何防止 Bootstrap CSS 干扰我的小部件样式。

破坏UI的例子

| | 使用引导

| | 没有引导

Answer 1

使用和不使用引导程序检查 box-sizing 属性。可能是 bootstrap 覆盖了现有的。