Bootstrap5工具类速查：margin、padding与显示隐藏技巧

Bootstrap5的工具类就像“CSS代码生成器”，不用写一行CSS，通过添加简单的类名就能快速设置样式，极大提升开发效率。本文重点介绍最常用的margin/padding工具类和显示隐藏技巧，适合零基础快速上手。

一、Margin与Padding工具类¶

margin（外边距）和padding（内边距）是控制元素间距的核心工具类，命名规则清晰，使用起来非常直观。

1. 命名规则¶

Bootstrap5的margin/padding类名格式统一为：[属性]-[方向]-[尺寸]，其中：
- 属性：m（margin）或p（padding）
- 方向：t（top，上）、b（bottom，下）、l（left，左）、r（right，右）、x（左右，l+r）、y（上下，t+b）
- 尺寸：0（0间距）、1（0.25rem）、2（0.5rem）、3（1rem）、4（1.5rem）、5（3rem）、auto（自动，仅margin可用）

2. 常用Margin类¶

单独方向控制：
mt-3：上外边距（margin-top: 1rem）
mb-2：下外边距（margin-bottom: 0.5rem）
ml-4：左外边距（margin-left: 1.5rem）
mr-1：右外边距（margin-right: 0.25rem）
复合方向控制：
mx-3：左右外边距同时设置（margin-left: 1rem; margin-right: 1rem）
my-2：上下外边距同时设置（margin-top: 0.5rem; margin-bottom: 0.5rem）
mx-auto：左右margin自动（块级元素居中神器！例如：div class="mx-auto" style="width: 50%;"）

3. 常用Padding类¶

padding类与margin类似，区别是属性为p，作用是“内边距”（内容与边框的距离）：
- pt-2：上内边距（padding-top: 0.5rem）
- pb-4：下内边距（padding-bottom: 1.5rem）
- px-3：左右内边距（padding-left: 1rem; padding-right: 1rem）
- py-1：上下内边距（padding-top: 0.25rem; padding-bottom: 0.25rem）

4. 示例代码¶

<!-- 带margin和padding的div -->
<div class="mt-4 p-3 bg-light border">
  这是一个带样式的div：
  - 顶部有margin（mt-4，上间距1rem）
  - 四周有padding（p-3，内间距0.75rem）
  - 背景色和边框通过其他类控制
</div>

二、显示与隐藏技巧¶

通过工具类可以轻松控制元素在不同场景下的显示/隐藏，无需写媒体查询。

1. 基础display控制¶

直接通过d-*类控制元素的显示类型（display属性）：
- d-none：隐藏元素（display: none，不占空间）
- d-block：块级显示（display: block）
- d-flex：弹性容器显示（display: flex）
- d-inline：行内显示（display: inline）

示例：隐藏按钮（默认隐藏，hover时显示）

<button class="d-none d-md-block">移动端隐藏，桌面端显示</button>

2. 响应式显示/隐藏（按断点）¶

Bootstrap5提供基于断点的显示控制，断点为：sm（576px）、md（768px）、lg（992px）、xl（1200px）、xxl（1400px）。
- 隐藏逻辑：d-*-none（替换为断点），例如d-md-none（中等屏幕及以上隐藏）
- 显示逻辑*：d-*-[类型]，例如d-sm-block（小屏幕及以上显示为块级）

常用组合：
- d-none d-md-block：默认隐藏（移动端隐藏），中等屏幕及以上显示
- d-md-none d-lg-block：中等屏幕隐藏，大屏幕显示
- d-none d-xl-flex：默认隐藏，超大屏幕显示为弹性容器

3. 可见性控制（不改变显示类型）¶

如果需要元素“不可见但仍占空间”，使用invisible类：

<div class="invisible">内容不可见，但仍占据位置</div>
<div>后面的内容会正常显示在下方</div>

三、总结¶

Bootstrap5工具类通过简洁的命名规则和响应式设计，让样式开发变得高效。margin/padding工具类只需记住“方向+尺寸”，显示隐藏类记住“d-*+断点”即可快速上手。实际开发中，可结合这些工具类快速搭建页面，再用语义化HTML标签保证结构清晰。

建议初学者多在代码中尝试不同组合，例如用mt-2 mx-auto让按钮居中，用d-sm-none隐藏移动端导航等，逐步熟悉工具类的使用场景。