CSS_bootstrap响应式布局基础使用

最新推荐文章于 2024-04-20 16:13:23 发布

小歪 | 前端

最新推荐文章于 2024-04-20 16:13:23 发布

阅读量97

点赞数

分类专栏： # CSS

本文链接：https://blog.csdn.net/weixin_44599931/article/details/115293968

版权

CSS 专栏收录该内容

41 篇文章 3 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.0-beta2/css/bootstrap-grid.css" rel="stylesheet">
		<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.0-beta2/js/bootstrap.bundle.js"></script>
	</head>
	<body>

		<div class="row">
			<div class="col-12 col-md-3 col-lg-6 col-xl-3">
				1
			</div>
			<div class="col-12 col-md-3 col-lg-6 col-xl-3">
				2
			</div>
			<div class="col-12 col-md-3 col-lg-6 col-xl-3">
				3
			</div>
			<div class="col-12 col-md-3 col-lg-6 col-xl-3">
				4
			</div>
		</div>

	</body>
</html>
<style>
	.row div {
		background: red;
		border: 1px solid #000;
		box-sizing: border-box;
	}
</style>