<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
.row {
display: flex;
flex-wrap: wrap;
}
.col,
.col-sm-6,
.col-md-3,
.col-lg-4 {
position: relative;
width: 100%;
padding-right: 15px;
padding-left: 15px;
}
.col {
flex-basis: 0;
flex-grow: 1;
}
@media (min-width: 576px) {
.col-sm-6 {
flex-grow: 0;
flex-basis: 50%;
max-width: 50%;
}
}
@media (min-width: 768px) {
.col-md-3 {
flex-grow: 0;
flex-basis: 33.33%;
max-width: 33.33%;
}
}
@media (min-width: 992px) {
.col-lg-4 {
flex-grow: 0;
flex-basis: 25%;
max-width: 25%;
}
}
.row .content {
width: 100%;
padding: 12px;
text-align: center;
border: 1px solid #ccc;
margin-bottom: 20px;
}
</style>
</head>
<body>
<!-- 假设需求: 移动端预览,元素占满一行,sm屏幕占两个,md屏幕占三个,lg屏幕占四个 -->
<div class="row">
<div class="col-sm-6 col-md-3 col-lg-4">
<div class="content">元素一</div>
</div>
<div class="col-sm-6 col-md-3 col-lg-4">
<div class="content">元素二</div>
</div>
<div class="col-sm-6 col-md-3 col-lg-4">
<div class="content">元素三</div>
</div>
<div class="col-sm-6 col-md-3 col-lg-4">
<div class="content">元素四</div>
</div>
<div class="col-sm-6 col-md-3 col-lg-4">
<div class="content">元素五</div>
</div>
<div class="col-sm-6 col-md-3 col-lg-4">
<div class="content">元素六</div>
</div>
<div class="col-sm-6 col-md-3 col-lg-4">
<div class="content">元素七</div>
</div>
<div class="col-sm-6 col-md-3 col-lg-4">
<div class="content">元素八</div>
</div>
<div class="col-sm-6 col-md-3 col-lg-4">
<div class="content">元素九</div>
</div>
<div class="col-sm-6 col-md-3 col-lg-4">
<div class="content">元素十</div>
</div>
<div class="col-sm-6 col-md-3 col-lg-4">
<div class="content">元素十一</div>
</div>
<div class="col-sm-6 col-md-3 col-lg-4">
<div class="content">元素十二</div>
</div>
</div>
</body>
</html>
bootstrapv4.5.2(栅格系统)
最新推荐文章于 2024-06-01 09:46:07 发布