Bootstrap 5 如何实现表单桌面端100%宽、移动端75%宽

1. 能否用Bootstrap 5内置类实现需求 #

完全可以，不需要自定义媒体查询。
Bootstrap 5的宽度工具类原生支持响应式断点，类名规则为w-{断点标识}-{宽度比例}，你的需求是移动端宽度75%、桌面端宽度100%，直接给form标签添加w-75 w-md-100两个类即可实现：

• w-75默认作用于移动端（<576px），设置宽度为75%，无更高断点的类覆盖时会持续生效到768px阈值
• w-md-100作用于≥768px的桌面端，覆盖前面的宽度规则，设置为100%
  你可以直接删除自定义的媒体查询代码，修改form的class属性即可满足需求。

2. 自定义媒体查询不生效的原因 #

你的代码存在两个核心问题：

语法错误 #

你写的选择器部分多了多余的冒号和嵌套大括号，属于无效CSS：

/* 错误写法 */
.formwidth: {
  {
    width: 75%;
  }
}

/* 正确写法 */
.formwidth {
  width: 75%;
}

断点逻辑完全写反 #

你注释标注的是适配手机端，但用了min-width: 768px，该规则只会在屏幕宽度≥768px的桌面端生效，和你的需求相反。如果要自定义媒体查询，正确写法为：

/* 适配小于768px的移动端 */
@media (max-width: 767.98px) {
  .formwidth {
    width: 75%;
  }
}

桌面端form是块级元素，默认宽度就是100%，不需要额外写规则。

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