引入Bootstrap导致Vue3侧边导航栏样式异常，求解决方案

Vue3开发的项目，侧边导航栏原本运行正常，在main.js中引入Bootstrap的压缩CSS（import "bootstrap/dist/css/bootstrap.min.css"）后，出现图标轻微偏移、按钮尺寸缩小的问题，使用Tailwind时也出现同样情况。

导航栏效果对比 #

• 引入前：
  
• 引入后：
  

导航栏组件代码 #

Sidebar.vue #

<script>
import NavBarLink from './NavBarLink.vue'
import {collapsed, toggleNavbar, navbarWidth} from './state'
export default{
    props: {},
    setup() {
        return { collapsed, toggleNavbar, navbarWidth };
    },
    components: { NavBarLink }
}
</script>

<template>
    <div class="sidebar" :style="{ width: navbarWidth }">
        <span @click="toggleNavbar" style="margin-bottom: 15px;">
            <i :class="`${collapsed ? 'fa-solid fa-bars': 'fa-solid fa-x'}`"></i> 
        </span>
        <span v-if="!collapsed" class="logo">website.<span style="color: orange">club</span></span>
        <span v-else class="logo">w<span style="color: orange">w</span></span>
        <NavBarLink to="/about" icon="fa-solid fa-magnifying-glass">Search</NavBarLink>
        <NavBarLink to="/plans" icon="fa-solid fa-tag">Plans</NavBarLink>
        <NavBarLink to="/fart" icon="fa-solid fa-user">Profile</NavBarLink>
    </div>
</template>

<style>
    :root {
        --navbar-bg-color: #0e0e0e;
        --navbar-item-hover: #1d1d1d;
    }
</style>

<style scoped>
    .sidebar{
        color: white;
        background-color: var(--navbar-bg-color);

        float: left;
        position: fixed;
        z-index: 1;
        top: 0;
        bottom: 0;
        left: 0;
        bottom: 0;
        padding: 0.5rem;

        transition: 0.3s ease;

        display: flex;
        flex-direction: column;
    }
    .logo {
        font-size: larger;
        font-family: Nexa;
        padding-top:15px;
        padding-bottom:15px;
    }
</style>

NavBarLink.vue #

<script>
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import { collapsed } from './state'
export default {
  props: {
    to: { type: String, required: true },
    icon: { type: String, required: true }
  },
  setup(props) {
    const route = useRoute()
    const isActive = computed(() => route.path === props.to)
    return { isActive, collapsed }
  }
}    
</script>

<template>
    <router-link :to="to" class="link" :class="{ active: isActive }">
        <i class="icon" :class="icon"/>
        <transition name="fade">
            <span v-if="!collapsed">
                <slot/>
            </span>
        </transition>
    </router-link>
</template>

<style scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.1s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
.link {
  display: flex;
  align-items: center;
  cursor: pointer;
  position: relative;
  font-weight: 400;
  user-select: none;
  margin: 0.1em 0.1em;
  padding: 0.4em;
  border-radius: 0.25em;
  height: 1.7em;
  color: white;
  text-decoration: none;
}
.link:hover {
    transition: .17s;
  background-color: var(--navbar-item-hover);
}
.link.active {
  background-color: var(--navbar-item-hover);
}
.link .icon {
  flex-shrink: 0;
  width: 35px;
  margin-right: 10px;
}
</style>

提问 #

是否可以通过移除Bootstrap的某个组件来解决该问题？

核心原因 #

Bootstrap和Tailwind这类CSS框架都会自带全局样式重置（比如统一box-sizing、设置默认字体、修改元素默认边距/内边距），同时会给<i>这类通用标签设置基础样式，这些规则会覆盖你自定义的导航栏样式，导致布局偏移、尺寸变化。

关于“移除Bootstrap某个组件” #

直接用编译好的bootstrap.min.css无法拆分单个组件样式，因为它是打包后的整体文件。如果必须保留Bootstrap的部分功能，建议改用Bootstrap的SCSS源码按需引入，只导入你需要的模块（比如只导入按钮组件，不导入全局重置样式），但需要配置SCSS编译环境。

如果不想改引入方式，更直接的修复方法如下：

1. 提升自定义样式优先级
   给导航栏的样式加上更具体的选择器，或者用!important（尽量少用，仅应急）强制覆盖框架样式：

   /* 在Sidebar.vue的全局样式或NavBarLink.vue的scoped样式中添加 */
   .sidebar .link {
     height: 1.7em !important;
     padding: 0.4em !important;
     margin: 0.1em 0.1em !important;
   }
   .sidebar .link .icon {
     width: 35px !important;
     margin-right: 10px !important;
     flex-shrink: 0 !important;
   }
   

2. 隔离框架样式
   不要全局引入Bootstrap/Tailwind的CSS，只在需要使用框架的组件内局部引入：

   <!-- 仅在需要Bootstrap的组件中添加 -->
   <style>
   @import "bootstrap/dist/css/bootstrap.min.css";
   </style>
   

3. 禁用Tailwind全局重置
   如果用Tailwind，在tailwind.config.js中关闭全局样式重置（preflight）：

   module.exports = {
     corePlugins: {
       preflight: false,
     },
   }
   

4. 精准定位冲突样式
   用浏览器开发者工具（F12）对比引入框架前后的元素样式，查看哪些属性被覆盖，针对性地在自定义样式中重新声明这些属性即可。

内容的提问来源于stack exchange，提问作者ste