Bootstrap 4+：为超小屏幕布局应用水平内边距类

你的问题出在Bootstrap的响应式类命名规则上：

• px-sm-4 是仅在**小屏幕及以上（≥576px）**才会生效的水平内边距类
• 超小屏幕（<576px，多数手机屏幕）是Bootstrap的默认断点，对应的样式类不需要加任何屏幕前缀

直接把 px-sm-4 改成 px-4 即可，修改后的代码：

<div class="py-4 pr-4 px-4"> // content </div>

如果需要超小屏用特定内边距，小屏及以上用另一个值（比如超小屏用px-2，小屏及以上用px-4），可以这么写：

<div class="py-4 pr-4 px-2 px-sm-4"> // content </div>

各样式类的作用说明：

• py-4：所有屏幕下的垂直内边距（上下）
• pr-4：所有屏幕下的右侧内边距（可根据实际需求调整或移除）
• px-4（或px-2）：超小屏幕下的水平内边距（左右）
• px-sm-4：小屏幕及以上的水平内边距（左右）

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