css - 仅对 Vuetify 应用中的某些屏幕宽度应用 CSS 类

Question

Vuetify 提供各种 CSS helper classes允许您根据元素定义的屏幕尺寸断点显示/隐藏元素，例如

<div class="d-lg-none">
  hide on screens wider than large (lg)
</div>

但是有没有办法有选择地在某个断点处应用一个类，例如如果我想在大屏幕及以上屏幕上使用 text-right 类，并在所有其他屏幕上使用 text-left 类，有没有办法做到这一点？

我意识到我可以编写自己的媒体查询，但我不愿意这样做，因为这需要我复制 Vuetify 断点。

Answer 1

看看Breakpoint service

您可以使用它以编程方式设置类。例如:

  <div :class="$vuetify.breakpoint.lgAndUp?'text-left':'text-right'">
     Text align by breakpoint
  </div>

https://codeply.com/p/OeODqdpdrm

另请注意:有响应式文本对齐类，例如:

    <div class="text-left text-lg-right">
        Text responsive align
    </div>