<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" \
crossorigin="anonymous">
<!-- 为了更好地兼容移动设备，使用CSS的媒体查询功能 --> <!-- 响应式布局第二点 -->
<meta name="viewport" content="width=device-width,initial-scale=1"/> <!-- width=device-width:宽度为当前设备的宽度， initial-scale=1：代表100%视区窗口用来显示，不放大也不缩小 -->
<style>
.row div{
border:solid 2px red; <!--给每个div设置边框 row指定div里面的边框而不设置外面的 不加就会很粗 -->
}
</style>
</head>
<body>
<!--Bootstrap栅格系统，会将网页分为12等份（宽度），例：设置最外层Div的宽度为1200px，每一份就是100px -->
<!--三层：为了模拟table标签<table><tr><td>,第一层：必须指定container属性，第二层：必须指定row属性 即：多行多列的布局方式-->
<!-- 所有的DIV，如果不指定高度，默认为0，但是会根据DIV中的内容进行自动调整 -->
<div class="container" style="margin: 0px auto;border: solid 5px blue"> <!-- margin 属性设置或返回元素的外边距 -->
<!-- 独立的一行，必须指定class为row，当然也可以单独设置自己的样式 -->
<div class="row">
<!-- col-x-3: 表示在超大屏幕（大于1200像素）的浏览器窗口上显示为3列宽度（即3/12列，也就是container总宽度的25%）-->
<!-- col-lg-3: 表示在大型屏幕（大于992像素）上显示为3列宽度 -->
<!-- col-md-6: 表示在中等屏幕（大于768像素）上显示为6列宽度 -->
<!-- col-sm-6: 表示在小型屏幕（大于576像素）上显示为6列宽度 -->
<!-- col-12: 表示在超小屏幕（小于576像素）上显示为12列宽度，与手机端适配此设计 --> <!-- 响应式布局第一点 -->
<div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12">
这是第一行第一列内容
</div>
<div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12">
这是第一行第二列内容
</div>
<div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12">
这是第一行第三列内容
</div>
<div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12">
这是第一行第四列内容
</div>
</div>
<div class="row">
<div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12">
这是第二行第一列内容
</div>
<div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12">
这是第二行第二列内容
</div>
<!-- 类d-none：隐藏 d-md-block表示在中等屏幕以下浏览器上隐藏改元素 -->
<div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12 d-none d-sm-block"> <!-- d-sm-block：在sm大小的所有设备上不隐藏 -->
这是第二行第三列内容
</div>
<div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12 d-none">
这是第二行第四列内容
</div>
</div>
</div>
</body>
</html>
11-23
4万+
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
