Bootstrap CSS中断小部件UI
我们已经用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的示例
||使用Bootstrap
||无引导
回答 1
Stack Overflow用户
发布于 2018-09-18 14:11:57
检查带引导和不带引导的框大小调整属性。可能的情况是，bootstrap正在覆盖现有的。
https://stackoverflow.com/questions/52366668
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号