bootstrap
/
index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Titie</title>
		<meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

		<style>
			body {
				background-color: #ff6799;
			}

			img {
				width: 200px;
				height: 200px;
			}
		</style>
	</head>
	<body class="container">
		<h3 ciass="mb-4">嵌套</h3>
		<!-- 大屏及以上:两位诗人的所有图片和文字都在一行，且排版均分。 大屏以下:两位诗人的图片和文字分开 小屏及小屏以上，图片和文字在一行，图片占4列，
		文字占8列小屏以下，图片和文字各占一行 -->
		<div class="row">
			<div class="col-12 col-lg-6">
				<div class="row border no-gutters">
					<div class="col-12 col-sm-4">
						<img src="./img/net.webp" alt="">
					</div>
					<div class="col-12 col-sm-8">
						李白诗歌的语言，有的清新如同口语，有的豪放，不拘声律，近于散文，但都统一在“清水出芙蓉，天然去睡饰”的自然美之中。
					</div>
				</div>
			</div>
			<div class="col-12 col-lg-6">
				<div class="row border no-gutters">
					<div class="col-12 col-sm-4">
						<img src="./img/promise1.webp" alt="">
					</div>
					<div class="col-12 col-sm-8">
						在杜甫中年因其诗风沉郁顿挫。忧国忧民，杜甫的诗被称为“诗史”。他的诗词以古体、律诗见长，风格多样，以“沉郁顿挫”四字准磅概括出他自己的作品风格，而以沉郁为主。
					</div>
				</div>
			</div>
		</div>

	</body>
</html>