Bootstrap4 栅格系统
栅格系统是Bootstrap中的页面布局系统。
栅格系统指的是对页面的布局，使用行和列的形式，且每行最多为12列，允许嵌套。
栅格系统为移动设备优先。
相关知识点均在示例中。
示例：
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap 的 CSS 文件 -->
<link rel="stylesheet" href="resources/bootstrap-4.6.1-dist/css/bootstrap.css">
<title>Grid System 栅格系统</title>
<style type="text/css">
div>div>div{border: solid 1px #ccc; background: #E6E2EB;}
</style>
</head>
<body>
<div class="container">
<h1>Grid System 栅格系统</h1>
<p>无需明确指定col-n，可直接使用class="col"，生成等宽的列。</p>
<div class="row">
<div class="col">1 of 2</div>
<div class="col">2 of 2</div>
</div>
<div class="row">
<div class="col">1 of 3</div>
<div class="col">2 of 3</div>
<div class="col">3 of 3</div>
</div>
<p>使用.w-100类进行换行</p>
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<!-- 使用w-100样式进行换行 -->
<div class="w-100"></div>
<div class="col">col</div>
<div class="col">col</div>
</div>
<p>设置单列宽度：设置单列的宽度，同级其余列依然会自动调整等宽</p>
<div class="row">
<div class="col">1 of 3</div>
<div class="col-6">2 of 3(占6/12的宽度)</div>
<div class="col">3 of 3</div>
</div>
<div class="row">
<div class="col">1 of 3</div>
<div class="col-5">2 of 3(占5/12的宽度)</div>
<div class="col">3 of 3</div>
</div>
<p>可变宽度内容，使用col-{breakpoint}-auto，可使其根据内容的宽度调整列的大小</p>
<div class="row justify-content-md-center">
<div class="col col-lg-2">1 of 3</div>
<div class="col-md-auto">2 of 3(可变宽度)</div>
<div class="col col-lg-2">3 of 3</div>
</div>
<div class="row">
<div class="col">1 of 3</div>
<div class="col-md-auto">2 of 3(可变宽度)</div>
<div class="col col-lg-2">3 of 3</div>
</div>
<p>混合使用，兼容不同宽度的设备</p>
<!-- 在移动设备上（宽度较小），第一个是全宽度的列，第二个是半宽度的列，在PC上（大显示器）就是一行，第一个占8/12，第二个占4/12 -->
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- 在移动设备上（宽度较小），全是50%的宽度，在PC上，全是4/12宽度 -->
<div class="row">
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- 在移动设备和PC上全部都是6/12的宽度 -->
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
<p>行列 在row上使用.row-cols-* 快速设置一行中的最大列数</p>
<!-- 这一行的最大列数为2 -->
<p>row-cols-2 最大列数2</p>
<div class="row row-cols-2">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
<!-- 这一行的最大列数为3 -->
<p>row-cols-3 最大列数3</p>
<div class="row row-cols-3">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
<!-- 这一行的最大列数为4 -->
<p>row-cols-4 最大列数4</p>
<div class="row row-cols-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
<!-- 这一行的最大列数为4 -->
<p>row-cols-4 最大列数4</p>
<div class="row row-cols-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col-6">Column</div>
<div class="col">Column</div>
</div>
<!-- 在不同的宽度设备上，这一行的最大列数不同 -->
<p>不同设备上不同的列数</p>
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
<p>垂直对齐</p>
<p>垂直对齐 - 上对齐 - align-items-start</p>
<div class="row align-items-start" style="min-height: 100px; background: #FFE5E5; border: solid 1px #ccc;">
<div class="col">One of three columns</div>
<div class="col">One of three columns</div>
<div class="col">One of three columns</div>
</div>
<p>垂直对齐 - 居中对齐 - align-items-center</p>
<div class="row align-items-center" style="min-height: 100px; background: #FFE5E5; border: solid 1px #ccc;">
<div class="col">One of three columns</div>
<div class="col">One of three columns</div>
<div class="col">One of three columns</div>
</div>
<p>垂直对齐 - 下对齐 - align-items-end</p>
<div class="row align-items-end" style="min-height: 100px; background: #FFE5E5; border: solid 1px #ccc;">
<div class="col">One of three columns</div>
<div class="col">One of three columns</div>
<div class="col">One of three columns</div>
</div>
<p>单元格的垂直对齐 align-self-start align-self-center align-self-end</p>
<div class="row" style="min-height: 100px; background: #FFE5E5; border: solid 1px #ccc;">
<div class="col align-self-start">One of three columns</div>
<div class="col align-self-center">One of three columns</div>
<div class="col align-self-end">One of three columns</div>
</div>
<p>水平对齐</p>
<p>水平对齐 - 左对齐 - justify-content-start</p>
<div class="row justify-content-start">
<div class="col-4">One of two columns</div>
<div class="col-4">One of two columns</div>
</div>
<p>水平对齐 - 居中对齐 - justify-content-center</p>
<div class="row justify-content-center">
<div class="col-4">One of two columns</div>
<div class="col-4">One of two columns</div>
</div>
<p>水平对齐 - 右对齐 - justify-content-end</p>
<div class="row justify-content-end">
<div class="col-4">One of two columns</div>
<div class="col-4">One of two columns</div>
</div>
<p>水平对齐 - 环绕对齐 - justify-content-around</p>
<div class="row justify-content-around">
<div class="col-4">One of two columns</div>
<div class="col-4">One of two columns</div>
</div>
<p>水平对齐 - 两端对齐 - justify-content-between</p>
<div class="row justify-content-between">
<div class="col-4">One of two columns</div>
<div class="col-4">One of two columns</div>
</div>
<p>no-gutters 去掉当前节点的左右margin和子节点的上下padding</p>
<div class="row no-gutters">
<div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<p>排序</p>
<p>排序 - 使用order-*进行单元格的排序</p>
<div class="row">
<div class="col">First in DOM, no order applied</div>
<div class="col order-12">Second in DOM, with a larger order</div>
<div class="col order-1">Third in DOM, with an order of 1</div>
</div>
<p>排序 - 使用order-last\order-first进行单元格的排序</p>
<div class="row">
<div class="col order-last">First in DOM, ordered last</div>
<div class="col">Second in DOM, unordered</div>
<div class="col order-first">Third in DOM, ordered first</div>
</div>
<p>列的偏移 .offset-</p>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
<div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>
<p>margin工具 设置margin为auto</p>
<p>ml-auto margin-left: auto;</p>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
<div class="row">
<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
</div>
<p>mr-auto margin-right: auto;</p>
<div class="row">
<div class="col-auto mr-auto">.col-auto .mr-auto</div>
<div class="col-auto">.col-auto</div>
</div>
<p>嵌套 栅格系统当然可以嵌套使用</p>
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-8 col-sm-6">Level 2: .col-8 .col-sm-6</div>
<div class="col-4 col-sm-6">Level 2: .col-4 .col-sm-6</div>
</div>
</div>
</div>
</div>
</body>
</html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现