Bootstrap v4媒体查询在Chrome DevTools设备工具栏失效求助

我之前也碰到过类似的DevTools与Bootstrap响应式类不匹配的情况，给你几个针对性的排查思路：

1. 优先检查视口元标签 #

这是最容易忽略的关键问题！如果你的HTML头部没有添加正确的视口元标签，浏览器（包括DevTools）会默认按桌面端宽度渲染页面，导致媒体查询判断错误。

确认你的页面<head>里是否包含：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

没有这个标签的话，哪怕设备尺寸小于768px，浏览器也会把视口宽度识别为桌面端的宽度（比如980px），自然会触发md断点的样式。

2. 验证Chrome DevTools的实际视口宽度 #

有时候DevTools的设备工具栏显示的尺寸和实际计算的视口宽度不一致，你可以：

• 点击DevTools右上角的三个点图标，选择Reset zoom恢复100%缩放比例——缩放非100%时，浏览器会调整视口宽度的计算值，导致媒体查询触发异常。
• 在DevTools的Console面板输入window.innerWidth，查看返回的实际视口宽度。如果这个数值大于等于768px，哪怕设备工具栏显示的是更小的尺寸，也会触发d-md-block的样式。

3. 检查Bootstrap的版本与样式完整性 #

• 确认你使用的Bootstrap版本的md断点是否为768px：Bootstrap 4和5的md断点都是min-width:768px，但如果是自定义了Bootstrap的SCSS变量（比如修改了$grid-breakpoints），可能断点被调整了。可以在DevTools的Elements面板查看该div的样式，找到.d-md-block对应的媒体查询规则，确认断点数值是否正确。
• 检查Bootstrap CSS是否完整引入：如果用Laravel的Mix/Vite编译资源，确保你正确导入了Bootstrap的全部样式，没有遗漏响应式布局相关的代码。

4. 排查Laravel资源编译与缓存问题 #

虽然你提到旧版Laravel没有这个问题，但新版的资源编译工具（Vite/Mix）可能存在缓存或者配置问题：

• 强制刷新浏览器缓存（Ctrl+Shift+R），避免加载旧的编译后的CSS文件。
• 检查你的资源编译配置文件（比如vite.config.js或webpack.mix.js），确认Bootstrap的导入方式正确，没有开启会移除媒体查询的优化选项。

5. 检查是否有自定义样式覆盖 #

打开DevTools的Elements面板，选中目标div，查看Computed标签页的display属性，确认它是否来自.d-md-block的媒体查询规则。如果有其他自定义CSS（比如带!important的规则）覆盖了这个样式，就会导致响应式失效。

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