如何用Bootstrap原生工具类实现不同屏幕尺寸的Div宽度适配？

针对你的需求，有几个更贴合Bootstrap原生生态的处理方式：

1. 用网格系统嵌套实现（纯原生工具类，最推荐） #

Bootstrap的col系列类本身就是为响应式宽度设计的，完全可以替代固定宽度工具类。你需要的小屏75%宽度对应12列布局的col-9（9/12=75%），大屏50%宽度对应col-xl-6（6/12=50%）。直接替换内层的w-75即可：

<div class="col-10 col-xl-8 justify-content-center align-items-center h-100">
  <div class="text-white col-9 col-xl-6 shaded-background">
    <h1 class="mb-3">Boost Efficiency and Productivity: Modernize Your Legacy Apps Today!</h1>
    <h2 class="mb-3">Don't let your legacy applications slow down your business.</h2>
  </div>
</div>

这种方式完全依赖Bootstrap原生类，不需要额外写CSS，和框架的响应式逻辑保持一致，维护成本最低。

2. 自定义响应式宽度工具类（适合复用场景） #

如果你需要像w-xl-50这类命名风格的工具类，可以手动扩展Bootstrap的工具类体系。直接在CSS中添加：

/* 对应Bootstrap 5的xl断点（1200px） */
@media (min-width: 1200px) {
  .w-xl-50 {
    width: 50% !important;
  }
}

之后就可以在HTML中使用w-75 w-xl-50，和col类的用法逻辑完全一致。如果用Sass开发，还可以借助Bootstrap内置的$breakpoints变量和混合宏来生成，更符合框架规范。

3. 优化媒体查询方案（自定义样式场景） #

如果一定要用媒体查询，建议使用Bootstrap官方定义的断点值（xl为1200px，而非你写的1024px），避免和框架其他响应式组件产生断点冲突：

@media (min-width: 1200px) {
  .shaded-background {
    width: 50%;
  }
}

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