当前位置：文江博客话题详情

CSS Bootstrap Vue.js

vue-cli3中main.js引入boostrap.css不生效,分页显示不出css样式

发布于 2022-09-07 22:59:05 字数 977 浏览 9 评论 0

npm run dev编译没有报错

main.js中import css样式

import 'bootstrap/dist/css/bootstrap.min.css'

组件中使用

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

页面显示,没有bootstrap CSS样式

收藏 0

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

评论（3）

回眸一笑 2022-09-14 22:59:06

这样无效，可能是jQuery没有添加依赖或者路径的原因，我推荐方便的方式，请在index.html中引入：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title></title>
    <link href="你的地址路径/bootstrap.min.css" rel="stylesheet"/>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
  <script src="你的地址路径/jquery.min.js"></script>
  <script src="你的地址路径/bootstrap.min.js"></script>
</html>

根目录可以查询到。如果要在main中引入，推荐用添加依赖的方式引用

过度放纵 2022-09-14 22:59:06

楼主，你好！首先确认下你安装的 bootstrap 版本是什么？如果是 3.x，你的这种是没有问题的。但如果安装是最新的 4.x，那么分页 html 结构及样式是有变化的，如下：

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>
</nav>

附上相关文档地址：

3.x 地址：分页
4.x 地址：分页

帅气称霸 2022-09-14 22:59:06

你先得先确定bootstrap的样式是否导入，是否安装。控制台里面是否能看到引入。再去确定问题

~没有更多了~

关于作者

掩饰不了的爱

暂无简介

0 文章

0 评论

324 人气

关注发私信

相关话题

热门标签

操作系统程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端

推荐作者

遂心如意

文章 0 评论 0

5513090242

文章 0 评论 0

巷雨优美回忆

文章 0 评论 0

junpengz2000

文章 0 评论 0

13郎

文章 0 评论 0

qq_xU4RDg

文章 0 评论 0

友情链接

我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的隐私政策了解更多相关信息。单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。

原文