源自：4-3 基本用法
改变屏幕大小后为什么会跑出去了
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网格系统</title>
<link type="text/css" rel="stylesheet" href="bootstrap-5.1.3-dist/bootstrap-5.1.3-dist/css/bootstrap.css">
<script type="text/javascript" src="bootstrap-5.1.3-dist/bootstrap-5.1.3-dist/js/bootstrap.js"></script>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<style type="text/css">
.q{
width: 100%;
height:1500px;
background-color:fuchsia;
display: flex;
flex-direction:column;
flex-wrap: wrap;
justify-content:space-between;
align-items: center;
}
.im{
width:1000px;
height: 150px;
background-color:pink;
display: flex;
flex-direction:row;
flex-wrap: wrap;
justify-content:center;
align-items: center;
}
p.{
width:100%
height:1500px;
background: chartreuse;
}
.container{
display: flex;
flex-direction:column;
flex-wrap: wrap;
justify-content:center;
align-items: center;
}
.row{
display: flex;
flex-direction:row;
flex-wrap: wrap;
justify-content:flex-start;
align-items: center;
}
.col-lg-6,.col-sm-12{
width:450px;
height:400px;
}
.ti{
width: 435px;
height: 50px;
display: flex;
flex-direction:column;
flex-wrap: wrap;
justify-content:flex-start;
align-items: flex-start:;
background:white;
}
.yi{
width: 435px;
height: 330px;
display: flex;
flex-direction:column;
flex-wrap: wrap;
justify-content:flex-start;
align-items: flex-start:;
background:white;
}
.ni{
width: 435px;
height: 380px;
background: orange;
display: flex;
flex-direction:column;
flex-wrap: wrap;
justify-content:flex-start;
align-items: flex-start:;
}
</style>
</head>
<body>
<div class="q">
<div class="im">
<h1 class="h1">Advance your thinking today and every day.</h1>
</div>
<div class="container">
<div class="row">
<div class="col-lg-6 col-sm-12">
<div class="ti"><h4>Accelerate knowledge from day one.</h4></div>
<div class="yi">
<p>
Type brackets around an `[idea]` to create a new link or see auto-complete results. You can instantly click to jump to a new page and keep typing ideas.
</p>
</div>
</div>
<div class="col-lg-6 col-sm-12"><div class="ni">第2块</div></div>
</div>
<div class="row">
<div class="col-lg-6 col-sm-12"><div class="ni">第1块</div></div>
<div class="col-lg-6 col-sm-12">
<div class="ti"><h4>Accelerate knowledge from day one.</h4></div>
<div class="yi">
<p>
Type brackets around an `[idea]` to create a new link or see auto-complete results. You can instantly click to jump to a new page and keep typing ideas.
</p>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-sm-12">
<div class="ti"><h4>Accelerate knowledge from day one.</h4></div>
<div class="yi">
<p>
Type brackets around an `[idea]` to create a new link or see auto-complete results. You can instantly click to jump to a new page and keep typing ideas.
</p>
</div>
</div>
<div class="col-lg-6 col-sm-12"><div class="ni">第2块</div></div>
</div>
</div>
</div>
</body>
</html>
提问者：qq_幕布斯5332851
2022-09-12 18:39