Bootstrap 5.1间距工具疑问：.ps-5类为何给元素两侧加内边距？

首先明确：ps-5类的作用是给元素的逻辑起始侧添加内边距——在LTR（左到右）布局下对应左侧，RTL（右到左）布局下对应右侧，它只会设置单侧内边距，不会同时给左右两侧加。你遇到两侧都有padding的情况，大概率是以下原因之一：

• 误加了其他间距类：检查元素是否同时应用了pe-5（逻辑结束侧内边距）或px-5（左右两侧内边距）类。这几个类叠加后，会同时设置左右内边距，和ps-5的效果叠加就会出现两侧都有padding的情况。
• 元素自带默认padding：部分HTML元素（如<ul>、<form>等）在浏览器默认样式或Bootstrap的基础样式中带有默认padding。可以通过浏览器开发者工具查看元素的样式来源，确认是否有默认样式在起作用。
• 自定义CSS冲突：如果你自己写了自定义CSS规则，比如直接给元素设置了padding-left和padding-right，且该规则的优先级高于Bootstrap的间距类（比如用了ID选择器、内联样式，或者加了!important），就会覆盖或叠加Bootstrap的样式。
• Bootstrap版本或引入问题：虽然你说用的是5.1，但如果实际引入的是旧版本（比如Bootstrap 3及以前，没有ps-*这类逻辑方向类），或者引入的CSS文件不完整，可能导致类名不生效，反而你看到的padding是其他来源的。

排查步骤建议：

1. 打开浏览器开发者工具（F12），选中目标元素，查看「样式」面板，找到padding-left和padding-right的来源，确认是哪个规则在生效。
2. 检查元素的class属性，确保没有同时添加px-*、pe-*这类会设置另一侧内边距的类。
3. 暂时移除自定义CSS，看是否还会出现两侧padding的情况，排查是否是样式冲突。

内容的提问来源于stack exchange，提问作者Linda Keating