关于Vue.cli 脚手架环境中引入Bootstrap时,table表格样式缺失的解决办法
2024-08-31 09:27:30
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>
最新文章
- SQL SERVER 临时表的排序问题
- git 笔记
- document.elementFromPoint在IE8下无法稳定获取当前坐标元素的解决方法
- [POI 2008][BZOJ 1132]Tro
- Hadoop学习笔记(5) ——编写HelloWorld(2)
- php判断是否为手机客户端
- Chapter 6 - How to Play Music and Sound Effect
- Java学习之路（一）了解Java
- Linux更换python版本 （转载）
- 把分类的select写在moden里做成一个组件 高洛峰
- CV_EXPORTS定义及作用
- WPF中对三维模型的控制
- JAVA循环结构示例
- jquery监听textarea内容变化
- tomcat中如何禁止列目录下的文件
- 浅析js闭包
- loadrunner测试结果三
- LHS 和 RHS----你所不知道的JavaScript系列（1）
- Winform控件学习笔记【第六天】——TreeView
- Java 8 可重复注解与类型注解