如何让带-sm后缀的CSS类仅在sm尺寸设备上生效？

Bootstrap 原生只给宽度、边距、浮动这类通用工具类预置了响应式断点变体，遵循{属性}-{断点}-{值}的命名规则，比如你提到的w-sm-50属于框架提前生成好CSS规则的类，所以可以直接生效。
而pagination-sm是分页组件的尺寸修饰类，原生没有提供断点变体的生成逻辑，你手动拼接出来的pagination-sm-sm没有对应的CSS样式定义，浏览器识别不到效果，属于正常情况。

方法1：自定义媒体查询（最通用，无需编译Sass，全版本Bootstrap兼容） #

直接在自定义CSS文件中，把pagination-sm的样式包裹在对应断点的媒体查询里，单独定义一个专属类即可。
Bootstrap 默认sm断点对应宽度区间为「≥576px 且 ＜768px」，如果需要让小尺寸分页样式仅在这个区间生效，代码如下：

/* 适配Bootstrap 5版本 */
@media (min-width: 576px) and (max-width: 767.98px) {
  .pagination-sm-only {
    --bs-pagination-padding-x: 0.75rem;
    --bs-pagination-padding-y: 0.375rem;
    --bs-pagination-font-size: 0.875rem;
    --bs-pagination-border-radius: 0.25rem;
  }
}

如果需求是「宽度≥576px（sm及以上断点）都应用小尺寸分页」，把媒体查询条件改成@media (min-width: 576px)即可。
使用时直接给分页元素加类：

<nav>
  <ul class="pagination pagination-sm-only">
    <!-- 分页项内容 -->
  </ul>
</nav>

如果用的是Bootstrap 4版本，把上面CSS变量的写法替换成Bootstrap4原生pagination-sm的固定样式即可：

/* 适配Bootstrap 4版本 */
@media (min-width: 576px) and (max-width: 767.98px) {
  .pagination-sm-only .page-link {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    line-height: 1.5;
  }
  .pagination-sm-only .page-item:first-child .page-link {
    border-top-left-radius: 0.2rem;
    border-bottom-left-radius: 0.2rem;
  }
  .pagination-sm-only .page-item:last-child .page-link {
    border-top-right-radius: 0.2rem;
    border-bottom-right-radius: 0.2rem;
  }
}

方法2：通过Sass配置生成原生响应式类（适合用Sass管理Bootstrap源码的项目） #

如果项目是通过Sass引入编译Bootstrap，可以通过扩展组件配置，让框架自动生成带断点的分页尺寸类，配置完成后就可以直接使用你预想的pagination-sm-sm类。
配置代码如下：

// 引入Bootstrap默认变量
@import "bootstrap/scss/variables";
// 给分页组件开启sm断点的尺寸变体
$pagination-responsive: true;
// 引入Bootstrap核心逻辑
@import "bootstrap/scss/bootstrap";

不推荐使用复制两份分页DOM、配合d-none/d-block响应式显示类切换的方案，这种方式会重复渲染DOM，增加页面冗余代码，后续维护成本很高。

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