Bootstrap中container边距设置
已于 2025年01月31日 12:13 修改
访问次数：22
在 Bootstrap 5 中，边距（Margin）和内边距（Padding）的工具类使用了简写形式，这些简写对应了英文单词的缩写。以下是详细的解释和对应的英文注释：
m：控制所有四个方向的边距（margin）。mt：控制上边距（margin-top）。mb：控制下边距（margin-bottom）。ml：控制左边距（margin-left）。注意：在 Bootstrap 5 中，ml和mr被替换为ms和me，以适应从左到右（LTR）和从右到左（RTL）布局。mr：控制右边距（margin-right）。同样，mr被me取代。mx：控制水平边距（margin-left和margin-right）。my：控制垂直边距（margin-top和margin-bottom）。
1. 边距（Margin）
Bootstrap 5 的边距工具类以 m 开头，表示 Margin（外边距）。
| 类名 | 英文全称 | 作用描述 |
|---|---|---|
m-{size} | Margin (All sides) | 设置元素四个方向的外边距。 |
mt-{size} | Margin Top | 设置元素的上边距。 |
mb-{size} | Margin Bottom | 设置元素的下边距。 |
ms-{size} | Margin Start (Left in LTR) | 设置元素的起始边距（左或右，取决于文本方向）。 |
me-{size} | Margin End (Right in LTR) | 设置元素的结束边距（左或右，取决于文本方向）。 |
mx-{size} | Margin X-axis (Left & Right) | 同时设置元素的左右边距。 |
my-{size} | Margin Y-axis (Top & Bottom) | 同时设置元素的上下边距。 |
2. 内边距（Padding）
Bootstrap 5 提供了以下类来控制元素的内边距：
- p-{size}: 设置所有四个边的内边距。例如：p-3 表示设置中等大小的内边距。
- pt-{size}: 设置上内边距。例如：pt-2 表示设置较小的上内边距。
- pb-{size}: 设置下内边距。例如：pb-4 表示设置较大的下内边距。
- ps-{size}: 设置左内边距（在LTR布局中）。例如：ps-1 表示设置较小的左内边距。
- pe-{size}: 设置右内边距（在LTR布局中）。例如：pe-5 表示设置较大的右内边距。
- px-{size}: 同时设置左右内边距。例如：px-3 表示设置中等大小的左右内边距。
- py-{size}: 同时设置上下内边距。例如：py-2 表示设置较小的上下内边距。
3. 边距和内边距的大小
Bootstrap 5 提供了以下几种大小选项：
- 0: 无边距或内边距。
- 1: 较小的边距或内边距（0.25rem）。
- 2: 较小的边距或内边距（0.5rem）。
- 3: 中等大小的边距或内边距（1rem）。
- 4: 较大的边距或内边距（1.5rem）。
- 5: 最大的边距或内边距（3rem）。
- auto: 自动计算边距（通常用于水平居中）。
评论（0）