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

发布于
2018-09-19

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样式

css vue.js bootstrap

阅读 8.8k

3 个回答

Leon

这样无效，可能是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中引入，推荐用添加依赖的方式引用

文博

3.3k1615

发布于
2018-09-19

楼主，你好！首先确认下你安装的 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 地址：分页