BootStrap基础学习——栅格网格系统（列组合，列偏移）

一、列组合的基础规则

Bootstrap 栅格系统以 “12 列” 为基础单位（即一行总宽度默认为 12 等份），列组合需遵循以下核心规则：

1. 列的总和不超过 12：同一行（row）内的列（col-*）宽度数值之和建议≤12，否则会自动换行（超出部分另起一行）。
2. 响应式前缀：列类名需结合断点前缀（sm/md/lg/xl/xxl），实现不同屏幕尺寸下的布局适配（如 col-md-6 表示中等屏幕及以上占 6 列宽度）。
3. 行内嵌套：列内部可再次嵌套 row 和 col-*，形成多层级布局，嵌套的列仍遵循 12 列规则（子列的 12 等份基于父列宽度）。

代码演示（以4等份进行演示）：

<div class="container">
			<div class="row">
				<div class="col-md-3" style="background-color: aqua;">3</div>
				<div class="col-md-3" style="background-color: black;">3</div>
				<div class="col-md-3" style="background-color: cadetblue;">3</div>
				<div class="col-md-3" style="background-color: darkcyan;">3</div>
			</div>
		</div>

结果演示：

如果内容超过12格，将直接进行换行处理

代码演示：

<div class="row">
				<div class="col-md-4" style="background-color: azure;">4</div>
				<div class="col-md-4" style="background-color: chartreuse;">4</div>
				<div class="col-md-5" style="background-color: antiquewhite;">5</div>
			</div>

结果演示：

二、列偏移的核心原理

Bootstrap 的列偏移基于 “12 列等分” 规则，通过为列添加 offset-* 类，在列的左侧生成相当于 “指定列数宽度” 的空白区域。其本质是通过 CSS 的 margin-left 实现（早期版本用 padding，Bootstrap 4+ 统一为 margin），且偏移量会随屏幕断点动态变化，确保响应式适配。

• 核心逻辑：offset-断点-数值 表示在指定断点下，列的左侧空出 “数值” 列的宽度（如 offset-md-3 表示在中等屏幕及以上，列左侧空出 3 列宽度）。
• 数值范围：0~12（与列宽数值对应，需确保 “列宽 + 偏移值≤12”，避免超出父容器宽度）。

代码演示（以中间空两格为例）：

<div class="row">
				<div class="col-md-2" style="background-color: aqua;">2</div>
				<div class="col-md-2 col-md-offset-2" style="background-color: seagreen;">2</div>
				<div class="col-md-2 col-md-offset-2" style="background-color: darkgray;">2</div>
				<div class="col-md-2" style="background-color: wheat;">2</div>
			</div>

结果演示：

如果偏移相加超过12格，将进行换行处理

代码演示（4+4+5 > 12）：

<div class="row">
				<div class="col-md-4" style="background-color: aqua;">4</div>
				<div class="col-md-4 col-md-offset-5" style="background-color: lavender;">4</div>
			</div>

结果演示：