Bootstrap 4.5宽度类w-80/mw-80在NextJS项目中不生效求助

问题背景 #

使用Bootstrap 4.5搭配NextJS 11.1、ReactJS 18.2开发时，带有w-80和mw-80类的divWithNoWidthSet元素未生成宽度样式。页面源码中能看到这两个类，但Chrome调试面板里无对应宽度属性。此前已知类似问题可能由img-fluid引发，但本次场景无该类，需针对性排查。

代码片段 #

<div className="m-auto w-30 rounded d-block" style={{ height: '300px', backgroundColor: 'whitesmoke'}}  >
  <div style={{ height: '150px'}} >
    <a href={...} target="_blank" rel="noopener"><img src={...}  className="img-fluid h-150 hm-150 mw-50 d-block m-auto" alt={...} /> </a>
  </div>
  <a href={...} target="_blank" rel="noopener">
    <div id="divWithNoWidthSet" className="w-80 mw-80 text-center m-auto p-3" style={{border: '1px solid red'}}>
      <h5>{...}</h5>
      <p>{...}</p>
    </div>
  </a>
</div> 

问题截图 #

解决步骤 #

• 确认Bootstrap加载完整性
  检查_app.js等全局入口文件是否正确导入bootstrap/dist/css/bootstrap.min.css，确保样式全局生效。若存在自定义CSS或其他样式框架（如Tailwind），可临时移除测试是否存在样式冲突。

• 验证自定义类的定义
  Bootstrap 4.5默认仅提供w-25/w-50/w-75/w-100/w-auto这些预设宽度类，没有w-80和mw-80。如果是自定义类，需确认项目中是否添加了对应的CSS规则：

  .w-80 { width: 80% !important; }
  .mw-80 { max-width: 80% !important; }
  

  若依赖工具类生成脚本，需确认脚本是否正常运行生成样式。

• 修复父元素布局限制
  目标元素的父级<a>标签默认是行内元素，会限制子元素宽度计算。给<a>标签添加d-block类转为块级元素：

  <a href={...} target="_blank" rel="noopener" className="d-block">
    <div id="divWithNoWidthSet" className="w-80 mw-80 text-center m-auto p-3" style={{border: '1px solid red'}}>
      <h5>{...}</h5>
      <p>{...}</p>
    </div>
  </a>
  

  同时注意外层的w-30类也需确认是否有有效定义，避免影响子元素宽度继承。

• 强制样式优先级测试
  若确认类定义存在但被覆盖，可临时在元素style属性中添加宽度值测试：

  <div id="divWithNoWidthSet" className="w-80 mw-80 text-center m-auto p-3" style={{border: '1px solid red', width: '80%', maxWidth: '80%'}}>
  

  若生效，说明是样式优先级问题，可在自定义CSS中添加!important或调整选择器特异性解决。

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