最佳答案
Bootstrap 4 的网格体系是构建呼应式网页的关键组件之一。它供给了一种简单而高效的方法来创建顺应差别屏幕尺寸的规划。本文将深刻探究 Bootstrap 4 网格体系的核心不雅点、利用方法跟实例，帮助你轻松控制次序规划的艺术。
一、基本不雅点
Bootstrap 4 的网格体系基于一个 12 列的规划，这意味着全部页面可能被分别为 12 个等宽的列。这些列可能经由过程差其余类来把持它们在各个屏幕尺寸下的表示。
1. 容器（Container）
容器是用于包裹网格体系的外层元素。它供给了内容的居中跟对齐，并为网格行跟列设置了内边距。
<div class="container">
<!-- 行跟列内容 -->
</div>
2. 行（Row）
行是网格体系中的程度部分，用于包裹列。它必须放在容器外部。
<div class="row">
<!-- 列内容 -->
</div>
3. 列（Column）
列是网格体系中的基本构成部分。经由过程增加类 .col-*-* 到列中，可能把持列的宽度跟规划。
<div class="col-md-6">
<!-- 列内容 -->
</div>
二、网格体系规矩
1. 列宽
列的宽度可能经由过程增加差其余类来实现。比方，.col-md-4 表示在中等及以上屏幕尺寸上，该列将占用 4 个列宽。
2. 呼应式规划
Bootstrap 4 的网格体系是呼应式的，这意味着列的宽度会根据屏幕尺寸主动调剂。可能经由过程增加差其余类前缀来把持在差别屏幕尺寸上的行动，如 .col-xs-*、.col-sm-*、.col-md-*、.col-lg-* 跟 .col-xl-*。
3. 偏移
偏移类，如 .mx-*，用于在程度偏向上向右挪动列。比方，.mx-auto 会将列居中对齐。
4. 嵌套
列可能嵌套在其他列外部，以创建复杂的规划。
<div class="row">
<div class="col-md-8">
<!-- 第一列内容 -->
</div>
<div class="col-md-4">
<!-- 嵌套列内容 -->
</div>
</div>
三、实例
以下是一个简单的 Bootstrap 4 网格规划实例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 4 网格规划实例</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<h2>标题 1</h2>
<p>这是第一列的内容。</p>
</div>
<div class="col-md-6">
<h2>标题 2</h2>
<p>这是第二列的内容。</p>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
在这个实例中，我们创建了一个包含两列的规划，其中第一列占用了 6 个列宽，第二列占用了剩下的 6 个列宽。
四、总结
Bootstrap 4 的网格体系为开辟者供给了一种简单而富强的方法来创建呼应式规划。经由过程懂得基本不雅点、规矩跟实例，你可能轻松地控制次序规划的艺术，并创建出顺应各种设备的网页规划。