Vuetify可见性课程无法正常工作

发布于 2025-01-31 10:13:56 字数 376 浏览 0 评论 0原文

遵循文档

使用以下类产生与我要在较大屏幕尺寸上删除元素并将其添加到小元素上的相反的相反。

 <span class="d-sm-none d-md-flex">
   {{ username }}               
 </span>

我已经尝试更改此类：

 <span class="d-md-none d-lg-flex">
  {{ username }}               
 </span>

但是，这具有相同的效果 - 该元素仅出现在小屏幕上。

如果有人知道为什么这些课程无法正常工作，我将感谢您的帮助。

原文

Following the docs here, I am trying to use a Vuetify visibility class to hide an element on small screens.

Using the following class produces the opposite of what I want removing the element on the larger screen size and adding it to the small one.

 <span class="d-sm-none d-md-flex">
   {{ username }}               
 </span>

I have tried changing the classes to this:

 <span class="d-md-none d-lg-flex">
  {{ username }}               
 </span>

However, this has the same effect - the element appears only on the small screen.

If anyone has any idea why these classes are not working as expected I would appreciate the help.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

[浮城] 2025-02-07 10:13:56

您应该添加默认显示屏，在您的情况下，应该是d-none而不是d-sm-none。

<span class="d-none d-md-flex">
    {{ username }}               
</span>

此元素将在小屏幕上隐藏在中屏设备上的flex。

You should add a default display, in your case it should be d-none instead of d-sm-none.

<span class="d-none d-md-flex">
    {{ username }}               
</span>

This element will be hidden on small screens and flex on medium screen devices.

回复收藏 0 原文

远昼 2025-02-07 10:13:56

将默认显示器设置为无，将其他设备屏幕屏幕设置为block。

<span class="d-none d-md-block">
    {{ username }}               
</span>

Set a the default display to none, and the other device screens to block.

<span class="d-none d-md-block">
    {{ username }}               
</span>

回复收藏 0 原文

眼藏柔 2025-02-07 10:13:56

我根据此创建了一个示例工作代码段/演示。

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  
})

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/vuetify.min.css"/>
<link rel="stylesheet" href="https://unpkg.com/@mdi/[email protected]/css/materialdesignicons.min.css"/>
<div id="app">
  <v-app id="inspire">
    <div>
      <div class="d-none d-sm-flex">
        Not visible on x-small screens
      </div>
      <div class="d-none d-md-flex">
        Not visible on x-small and small screens
      </div>
      <div class="d-none d-lg-flex">
        Not visible on x-small, small and medium screens
      </div>
    </div>
  </v-app>
</div>

I created a sample working code snippet/demo as per this document and it's working fine.

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  
})

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/vuetify.min.css"/>
<link rel="stylesheet" href="https://unpkg.com/@mdi/[email protected]/css/materialdesignicons.min.css"/>
<div id="app">
  <v-app id="inspire">
    <div>
      <div class="d-none d-sm-flex">
        Not visible on x-small screens
      </div>
      <div class="d-none d-md-flex">
        Not visible on x-small and small screens
      </div>
      <div class="d-none d-lg-flex">
        Not visible on x-small, small and medium screens
      </div>
    </div>
  </v-app>
</div>

回复收藏 0 原文

~没有更多了~