【不影响使用】bootstrap.css和ant design vue的样式冲突导致icon移位

[zongfei.fu]

目前发现bootstrap.min.css和ant design vue的样式冲突，导致icon移位问题。
该BUG不影响使用，暂时未解决，会影响部分icon和文字错位，视觉差不大。
开发者有强迫症，寻找有前端很厉害的可以帮忙解决下，感谢~
例如：

[jinyan2049]

您好，开发者，我不是前端高手，
但是当你在同一个项目中使用 Bootstrap 和 Ant Design Vue 时，样式冲突是常见的问题，因为两个框架都定义了一些相同的CSS类名和规则，这可能会导致一些不可预测的样式效果，比如你提到的图标（icon）移位问题。解决这类问题通常需要一些特定的策略，以下是一些建议：

1. CSS命名空间
   为了避免样式冲突，可以给每个框架的样式添加一个独特的命名空间。这意味着你需要自定义构建过程，为每个框架的样式选择器添加一个特定的前缀。这种方法可能比较复杂，因为它可能需要你深入到每个框架的构建过程中去。

2. 使用更具体的CSS选择器
   当你不能改变CSS类名时，使用更具体的CSS选择器可以帮助你覆盖冲突的样式。例如，如果你知道冲突影响的是Ant Design Vue的图标，你可以为这些图标定义更具体的CSS规则：

css
Copy code
.anticon {
/* 你的样式调整，比如： /
margin: 0; / 根据需要调整 */
}
确保这些规则在样式表中的位置比Bootstrap和Ant Design Vue的样式后面，以确保它们具有更高的优先级。

3. 使用CSS模块
   如果你的项目支持CSS模块（例如在使用Webpack的React或Vue项目中），你可以利用CSS模块来避免样式冲突。CSS模块可以自动为每个类名生成唯一的标识符，这意味着你可以在不担心冲突的情况下自由地使用任何类名。

4. 动态加载样式
   如果你的应用允许，可以考虑根据需要动态加载和卸载CSS文件。这意味着你可以在某个组件或页面使用Ant Design Vue时，只加载Ant Design Vue的样式，而在需要Bootstrap样式的时候再加载Bootstrap。这可以通过JavaScript动态添加或删除元素到中来实现。

详细例子：修正图标位置
假设图标位置因为两个框架的样式冲突而发生了位移，你可以通过直接针对冲突的图标应用CSS规则来修正位置。例如：

css
Copy code
/* 针对Ant Design Vue图标的特定修正 /
.anticon {
position: relative;
top: -2px; / 根据实际偏移调整 */
}
在实际应用中，你可能需要根据具体的冲突情况调整这些值。务必在不同的浏览器和设备上测试这些改动，以确保它们在各种环境下都能正常工作。

以上策略可以根据你的具体需求和项目结构进行调整。
在处理这类问题时，最重要的是仔细测试和验证你的解决方案，确保它不会引入其他问题。