Bootstrap 的 d-none d-md-block 在 Vue 里为啥不生效？
我在 Vue 组件里用 Bootstrap 的响应式显示类，比如 d-none 和 d-md-block，想在小屏隐藏某个元素，但实际在手机上还是显示出来了，完全没反应。是我用法不对吗？
我已经确认引入了 Bootstrap 的 CSS，其他样式比如 btn、container 都正常。下面是我的代码：
<template>
<div class="d-none d-md-block">
这段文字应该在 md 及以上屏幕才显示
</div>
</template>- 2
回答
42浏览
Bootstrap警告框在Vue中动态隐藏后样式残留怎么办？
我在用Vue和Bootstrap做表单验证时，给错误提示用了alert-danger组件。通过v-if控制显示隐藏，但隐藏后背景色偶尔会残留白色边框，这是怎么回事啊？ 代码是这样的： <temp...
- 2
回答
31浏览
Bootstrap栅格两列高度不一致怎么解决？
用Bootstrap的栅格系统做布局时，左边col-md-3固定宽度，右边col-md-9放动态内容。如果右边内容多，左边列的高度就只到自己内容结束，看起来特别丑，试过给父容器加height:100%...
- 2
回答
39浏览
Avue表单动态更新后视图不刷新怎么办？
用Avue的avue-crud组件做表格编辑时，通过API获取到新数据赋值给formData，页面就是不更新。折腾了半天没反应... 代码是这样写的： this.form = {}; // 初始化空对...
- 1
回答
2浏览
为什么用 mini-css-extract-plugin 提取的 CSS 在 Vue 组件里不生效？
我用 Webpack 的 mini-css-extract-plugin 把 CSS 单独抽出来了，但发现 Vue 组件里的样式根本没加载，页面一片空白。明明 build 出来的 CSS 文件有内容，...
- 1
回答
4浏览
为什么在 Vue 里监听键盘事件时 keyCode 不生效？
我最近在用 Vue 做一个快捷键功能，想通过 keyCode 判断按的是哪个键，但发现它一直是 undefined。明明以前这么写是没问题的，是不是现在浏览器不支持了？ 我试过在 @keydown 里...
- 1
回答
3浏览
Webpack配置中如何正确处理Vue单文件组件的样式作用域问题？
我最近在用 Webpack 手动搭建 Vue 项目，发现 scoped 样式没生效，全局污染了其他组件。我确认 vue-loader 已经装了，也按文档配了 rule，但还是不行。是不是 loader...
- 2
回答
5浏览
Storybook 里 Vue 组件的 props 默认值不生效？
我在 Storybook 里写了个带默认值的 Vue 组件，但预览时 props 的默认值没显示出来，明明本地用是正常的，是不是我写法有问题？ 试过在 argTypes 里手动指定 defaultVa...
- 1
回答
6浏览
Memory Cache 没生效？Vue组件里图片重复请求怎么回事？
我在 Vue 项目里用 img 标签加载同一张图片，按理说浏览器应该走 Memory Cache，但每次切换组件都会重新请求，network 面板里状态是 200 而不是 (memory cache)...
- 2
回答
4浏览
Vue路由拦截不生效是怎么回事？
我在用 Vue Router 做登录权限控制，明明写了 beforeEach 拦截，但没登录的用户还是能直接访问 /dashboard 页面，完全没被拦住。 我试过在 router.beforeEac...
- 1
回答
11浏览
Vue中图片懒加载不生效，是写法有问题吗？
我在用 Vue 3 做一个图片列表页，想用原生 Intersection Observer 实现懒加载，但滚动时图片根本没触发加载，一直显示 loading 占位图。我查了文档也加了 rootMarg...
最可能的原因是：Bootstrap 版本太老或者引入的版本没有响应式显示类。d-none、d-md-block 这些是 Bootstrap 4.1+ 才有的，Bootstrap 3 根本没有这些类。你可以检查一下引入的 Bootstrap 版本号。
如果版本没问题，那基本就是被其他 CSS 覆盖了。你可以打开浏览器开发者工具，定位到这个元素，看 computed 面板里的 display 属性实际是什么值，以及是哪个 CSS 规则覆盖的。
还有一种情况：Vue 组件的 scoped 样式意外影响。虽然 scoped 通常不会影响 class ，但如果你的组件根元素上绑定了动态样式或者有其他奇怪的写法，可能会冲突。
解决办法很简单，先用浏览器工具定位具体是哪个规则覆盖了 display，然后针对性地用更高优先级的选择器覆盖回来，或者直接在元素上写内联样式：
先看看版本号和 computed 样式吧，十有八九是版本问题或者被覆盖了。