高效布局之道：Bootstrap网格系统进阶使用技巧

xs: <576,  sm: ≥576,  md: ≥768,  lg: ≥992,  xl: ≥1200,  xxl: ≥1400
```**3. 列类的计算逻辑**`.col-md-4` 表示：

- 在 ≥768px 视口时占据 4/12（即33.33%）
- 小于768px 时自动堆叠为100%宽度

---

### 实际应用场景
#### 场景1：响应式卡片网格布局
```html
<div class="container">
<div class="row">
<!-- 大屏显示4列，中屏3列，小屏2列，超小屏1列 -->
<div class="col-12 col-sm-6 col-md-4 col-lg-3 mb-4">
<div class="card">卡片内容</div>
</div>
<!-- 重复多个卡片... -->
</div>
</div>

<div class="row align-items-center">
<div class="col-md-3">
<label class="form-label">用户名</label>
</div>
<div class="col-md-6">
<input type="text" class="form-control">
</div>
<div class="col-md-3">
<button class="btn btn-primary">提交</button>
</div>
</div>

<div class="row g-3"> <!-- 列间水平垂直间距统一为1rem -->
<div class="col">...</div>
</div>
```**2. 列偏移的妙用**`.offset-md-2` 实现向右偏移两列，避免空div占位：
```html
<div class="row">
<div class="col-md-4 offset-md-4">居中内容</div>
</div>
```**3. 嵌套网格的注意事项**嵌套时必须在新`.row`内创建子列，否则破坏布局：
```html
<div class="col-md-6">
<div class="row"> <!-- 必须添加嵌套行 -->
<div class="col-6">内层网格</div>
</div>
</div>

<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card h-100">等高卡片</div>
</div>
</div>

<div class="row">
<div class="col-md-3 order-md-2">右侧内容（移动端优先显示）</div>
<div class="col-md-9 order-md-1">左侧主体</div>
</div>

.custom-container {
max-width: 1800px; /*在_variables.scss中覆盖$container-max-widths*/
}