vue项目引入本地bootstrap不生效问题

最新推荐文章于 2024-04-07 20:43:02 发布

舒克舒克开飞机的舒克

最新推荐文章于 2024-04-07 20:43:02 发布

阅读量2.4k

点赞数 1

文章标签： bootstrap vue.js 前端

本文链接：https://blog.csdn.net/weixin_45660458/article/details/126029048

版权

前提：本地下载安装了bootstrap并引入项目

<link rel="stylesheet" type="text/css" href="../bootstrap3.4.1/css/bootstrap.min.css"/>
<script type="text/javascript" src="../bootstrap3.4.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../bootstrap3.4.1/js/jquery-3.6.0.min.js"></script>

写了个导航栏，预览的时候没有达到预想效果，应该是有导航，且文字居右显示

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
		<div>
			<p class="navbar-text navbar-right">欢迎！</p>
		</div>
    </div>
</nav>

在这里插入图片描述
原因是package.json中没有添加bootstrap的依赖

用npm引入bootstrap就可以了，版本和本地下载的一致。我的是3.4.1
这里不清楚需不需要cd到项目文件夹，我试过在父文件夹，也就是这里的HbuilderXProjects下载，但是lastTest的package.json总是自动下载最新的bootstrap，所以我直接在项目文件夹下载了。