如何使用Bootstrap 5.2类在小屏幕下移除内边距

Bootstrap自带响应式间距类，完全可以不用写额外CSS就实现小屏幕移除内边距的需求，直接调整容器的类即可。

具体做法： #

Bootstrap的间距类支持断点前缀，格式为p-{断点}-{大小}，其中断点前缀（如sm/md/lg）表示从该断点宽度开始向上生效。要让小屏幕去掉p-5的内边距，我们可以先给所有屏幕设置p-0（小屏幕生效），再给大屏幕（指定断点及以上）设置p-5覆盖样式。

比如你要在sm断点（<576px）以下的小屏幕移除内边距，修改后的代码如下：

<div class="container-fluid text-center p-0 p-sm-5">
    <div class="row">
      <div class="col-sm-4 d-none d-sm-none d-md-none d-lg-block">
        <accordion />
      </div>
    </div>
</div>

说明： #

• p-0：给所有屏幕设置内边距为0，小屏幕（<576px）会直接应用这个样式
• p-sm-5：从sm断点（≥576px）开始，将内边距替换为5，覆盖p-0的样式，保留大屏幕所需的内边距

如果你的“小屏幕”指的是更大的范围（比如md断点<768px以下），只需把p-sm-5换成p-md-5即可，以此类推可适配不同的断点需求。

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