Bootstrap 5能否通过类名在响应式断点处修改容器宽度

• 核心版本差异：Bootstrap 5.3 之前的官方预编译版本（包括常规CDN引入的默认CSS）没有内置宽度（sizing）类的响应式变体，你写的w-md-50类在旧版本CSS文件中根本不存在，自然不会生效。而内边距p-md-*、外边距m-md-*、显示规则d-md-*这类工具类从Bootstrap 5发布之初就默认提供响应式版本，所以修改内边距可以正常生效。
• 类名冲突：你当前代码中添加的container-sm是Bootstrap的固定宽度容器类，会在不同响应断点下给元素设置固定像素值的max-width属性，会覆盖w-*设置的百分比宽度规则，和你需要的自适应百分比宽度需求完全冲突。

以下两种方案都可以直接通过类名实现需求，不需要额外修改SCSS配置：

方案1：栅格类实现（全Bootstrap5版本兼容，推荐） #

Bootstrap原生12栅格系统天生支持响应式宽度规则，所有5.x版本都可以直接使用，不需要依赖版本特性：

• col-9：默认宽度75%（栅格共12等份，9/12=75%）
• col-md-6：屏幕宽度≥md断点时宽度为50%（6/12=50%）
  你只需要替换掉冲突的container-sm w-75即可，修改后代码：

<div class="col-9 col-md-6 min-vh-75 d-flex flex-column justify-content-lg-start align-items-center m-auto mt-3">
    <p></p>
</div>

提示：如果外层没有包裹.row容器，栅格类也可以正常生效，配合你已经写的m-auto就能实现水平居中，不需要额外添加容器类。

方案2：使用响应式宽度类（仅适用于Bootstrap 5.3+版本） #

Bootstrap 5.3及以上版本的预编译CSS已经默认提供了w-{breakpoint}-*系列响应式宽度类，写法逻辑和你熟悉的Tailwind响应式类一致，仅需要删除冲突的container-sm类即可：

<div class="w-75 w-md-50 min-vh-75 d-flex flex-column justify-content-lg-start align-items-center m-auto mt-3">
    <p></p>
</div>

注意Bootstrap的响应式类断点前缀统一写在属性名和属性值中间，和p-md-*、d-md-*的规则保持一致。

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