Bootstrap 的 d-none d-md-block 在 Vue 里为啥不生效？

Designer°诗语提问于 2026-03-10 18:03:17 阅读 42

组件

我在 Vue 组件里用 Bootstrap 的响应式显示类，比如 d-none 和 d-md-block，想在小屏隐藏某个元素，但实际在手机上还是显示出来了，完全没反应。是我用法不对吗？

我已经确认引入了 Bootstrap 的 CSS，其他样式比如 btn、container 都正常。下面是我的代码：

<template>
  <div class="d-none d-md-block">
    这段文字应该在 md 及以上屏幕才显示
  </div>
</template>

UI框架响应式工具

我来解答赞 5 收藏

反馈

1 条解答

UP主～瑞腾 Lv1

这个问题其实挺常见的，我来帮你排查一下。

最可能的原因是：Bootstrap 版本太老或者引入的版本没有响应式显示类。d-none、d-md-block 这些是 Bootstrap 4.1+ 才有的，Bootstrap 3 根本没有这些类。你可以检查一下引入的 Bootstrap 版本号。

如果版本没问题，那基本就是被其他 CSS 覆盖了。你可以打开浏览器开发者工具，定位到这个元素，看 computed 面板里的 display 属性实际是什么值，以及是哪个 CSS 规则覆盖的。

还有一种情况：Vue 组件的 scoped 样式意外影响。虽然 scoped 通常不会影响 class ，但如果你的组件根元素上绑定了动态样式或者有其他奇怪的写法，可能会冲突。

解决办法很简单，先用浏览器工具定位具体是哪个规则覆盖了 display，然后针对性地用更高优先级的选择器覆盖回来，或者直接在元素上写内联样式：

<div style="display: none;" class="d-md-block">

  这段文字应该在 md 及以上屏幕才显示

</div>

先看看版本号和 computed 样式吧，十有八九是版本问题或者被覆盖了。

2026-03-10 19:00