Bootstrap栅格系统布局的对齐方式

欣欣

前端小白

垂直对齐

1、行的对齐方式
align-items-start 顶对齐
align-items-center 中间对齐
align-items-end 底对齐

<!DOCTYPE html>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
		integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	<title>栅格系统布局</title>
	<style>
		body{
			padding-bottom: 1000px;
		.row div{
			height: 100px;
			background: green;
			border: 1px solid #000;
			color: #fff;
		.v-align{
			height: 100px;
			background: rgba(255,0,0,0.1);
			margin: 10px -15px;
		.v-align div{
			height: 40px;
			line-height: 40px;
			background: rgba(86, 61, 124, 0.15);
			border: 1px solid rgba(86, 61, 124, 0.2);
			color: #333;
	</style>
</head>
	<div class="container">
		<div class="row v-align align-items-start">
			<div class="col">垂直对齐-顶部对齐-行的对齐方式</div>
			<div class="col">垂直对齐-顶部对齐-行的对齐方式</div>
			<div class="col">垂直对齐-顶部对齐-行的对齐方式</div>
		</div>
		<div class="row v-align align-items-center">
			<div class="col">垂直对齐-中间对齐-行的对齐方式</div>
			<div class="col">垂直对齐-中间对齐-行的对齐方式</div>
			<div class="col">垂直对齐-中间对齐-行的对齐方式</div>
		</div>
		<div class="row v-align align-items-end">
			<div class="col">垂直对齐-底对齐-行的对齐方式</div>
			<div class="col">垂直对齐-底对齐-行的对齐方式</div>