Bootstrap版本不同，个别类的css样式无效

最新推荐文章于 2024-05-05 18:17:26 发布

Mute_IT

最新推荐文章于 2024-05-05 18:17:26 发布

阅读量2k

点赞数

文章标签：前端 H5 Bootstrap

本文链接：https://blog.csdn.net/qq_41300934/article/details/91410109

版权

Bootstrap 表格 css样式

刚开始接触Bootstrap，发现有些Bootstrap 表格类在Bootstrap4与Bootstrap3存在一些问题（这种不知道属于什么问题，希望知道的大佬告知，谢谢）
例如，

.table-striped我在荣耀MagicBook中测试（其它电脑测试无问题），各种浏览器在Bootstrap3中都无效，而Bootstrap4则生效；
.table-condensed在Bootstrap3中生效，在Bootstrap4中无效；

通过查看Bootstrap3&4的css源码发现：

.table-striped

在荣耀MagicBook中测试，其它电脑测试无问题，至于为什么Bootstrap3在荣耀MagicBook 中无效果，这个还不清楚是什么问题；

.table-striped tbody tr:nth-of-type(odd) {
background-color: rgba(0, 0, 0, 0.05);
}

通过查看Bootstrap4css源码，发现.table-striped是有设置背景颜色样式的。

.table-condensed

.table-condensed > thead > tr > th,
.table-condensed > tbody > tr > th,
.table-condensed > tfoot > tr > th,
.table-condensed > thead > tr > td,
.table-condensed > tbody > tr > td,
.table-condensed > tfoot > tr > td {
padding: 5px;
}

在Bootstrap3中.table-condensed是有padding:5px;样式的，所以会生效让表格更加紧凑;
而在Bootstrap4中，我并没有找到有.table-condensed这个类。

具体代码如下：

Bootstrap3表格 css样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>bootstrap3</title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
		<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
		<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
	</head>
	<body>
		<div class="container">
			<h2>表格</h2>
			<p>联合使用所有表格类:</p>
			<table class="table table-striped table-bordered table-hover table-condensed">
				<thead>
					<tr>
						<th>#</th>
						<th>Firstname</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>1</td>
						<td>Anna</td>
					</tr>
					<tr>
						<td>2</td>
						<td>Debbie</td>
					</tr>
					<tr>
						<td>3</td>
						<td>John</td>
					</tr>
				</tbody>
			</table>
		</div>

	</body>
</html>

Bootstrap4表格 css样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>bootstrap4</title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
		<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
		<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
	</head>
	<body>
		<div class="container">
			<h2>表格</h2>
			<p>联合使用所有表格类:</p>
			<table class="table table-striped table-bordered table-hover table-condensed">
				<thead>
					<tr>
						<th>#</th>
						<th>Firstname</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>1</td>
						<td>Anna</td>
					</tr>
					<tr>
						<td>2</td>
						<td>Debbie</td>
					</tr>
					<tr>
						<td>3</td>
						<td>John</td>
					</tr>
				</tbody>
			</table>
		</div>
	</body>
</html>

还有等等一些其它的类，都存在因版本不同而导致效果无法显示的问题。。。这里就不一一列举了

Mute_IT

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Bootstrap版本不同，个别类的css样式无效

Bootstrap 表格 css样式刚开始接触Bootstrap，发现有些Bootstrap 表格类在Bootstrap4与Bootstrap3存在一些问题（这种不知道属于什么问题，希望知道的大佬告知，谢谢）例如，.table-striped我在荣耀MagicBook中测试（其它电脑测试无问题），各种浏览器在Bootstrap3中都无效，而Bootstrap4则生效；.table-con...
复制链接

扫一扫