bootstrap题目创建一个8-4列栅格

最新推荐文章于 2024-07-18 11:31:54 发布

chenfthh

最新推荐文章于 2024-07-18 11:31:54 发布

阅读量2.3k

点赞数 3

文章标签： bootstrap html jquery

本文链接：https://blog.csdn.net/weixin_44828960/article/details/108774320

版权

该博客详细介绍了如何使用Bootstrap创建一个8-4列的栅格系统布局，并在内部嵌套了8-4和9-3的子栅格。通过HTML和CSS，实现了在中屏（md）显示时的特定列宽分布，展示了Bootstrap栅格系统的灵活性。

摘要由CSDN通过智能技术生成

bootstrap题目：按以下要求创建一个栅格系统布局：创建一个8-4列栅格，在第一个8列中插入8-4列，在第二个4列中插入9-3列（备注：以中屏md（970px）为例）。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="#005CBF" />
		<title></title>
		 <link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css" >
		 <script src="./js/jquery-3.3.1.slim.js"></script>
		 <script src="js/bootstrap.min.js"></script>
	</head>
	<body>
		<div class="container">
			<div class="row">
				<div class="col-md-8" style="background: #E4606D;">md-8
				<div class="row">
				<div class="col-md-8" style="background: #0056B3;">md-8</div>
				<div class="col-md-4" style="background: #34CE57;">md-4</div>
				</div>
				</div>
				<div class="col-md-4" style="background: #34CE57;">md-4
				<div class="row">
				<div class="col-md-9" style="background: #0056B3;">md-9</div><div class="col-md-3" style="background: #E4606D;">md-3</div>
				</div>
				</div>
			</div>
		</div>
	</body>
</html>