关于Vue.cli 脚手架环境中引入Bootstrap时,table表格样式缺失的解决办法

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

Vue+bootstrap不能正常使用table的样式

环境：下载官网的本地bootstrap包，然后在vue 的index.html引入bootstrap的css和js环境

问题描述：1. vue里面引用bootstrap 的时候，table 的其他样式（table-border、table-hover等）不生效

代码:

1 <table class='table table-striped'>
2 <caption>学生管理系统v1.0-展示学生</caption>
3 <tr>
4 <th>姓名</th>
5 <th>年龄</th>
6 <th>性别</th>
7 <th>操作</th>
8 </tr>
9 <tr v-for='item,index in arr' :key='index'>
10 <td>{{item.name}}</td>
11 <td>{{item.age}}</td>
12 <td>{{item.gender}}</td>
13 <td>
14 <button class='btn btn-danger btn-xs' data-toggle='modal' data-target='#exampleModal' data-whatever='@mdo' @click='del(index)'>删除</button>
15 </td>
16 </tr>
17 </table>

解决办法：在table里面，用tbody标签再套一层，如果有 caption标签，把caption标签放到 tbody 上面即可解决问题，因为caption标签必须紧贴着tbody标签（如下所示）

代码：

1 <table class='table table-striped'>
2 <caption>学生管理系统v1.0-展示学生</caption>
3 <tbody>
4 <tr>
5 <th>姓名</th>
6 <th>年龄</th>
7 <th>性别</th>
8 <th>操作</th>
9 </tr>
10 <tr v-for='item,index in arr' :key='index'>
11 <td>{{item.name}}</td>
12 <td>{{item.age}}</td>
13 <td>{{item.gender}}</td>
14 <td>
15 <button class='btn btn-danger btn-xs' data-toggle='modal' data-target='#exampleModal' data-whatever='@mdo' @click='del(index)'>删除</button>
16 </td>
17 </tr>
18 </tbody>
19 </table>