我们有旧的VueJS+Vutify应用程序,我们正在将其转换为VueJS3.我们在模板中定义了一些在新版本中不可用的类.

xs12类(假设覆盖全屏)、text-xs-left类(假设设置左对齐文本)、offset-xs2类(假设设置偏移量).VueJS2+Vutify中提供了许多类似的功能,而新版本中缺少这些功能.

如何在新的VueJS3+Vutify中添加这些课程?

推荐答案

xs个类被移除以支持无断点版本,即text-left个类而不是text-xs-left个类.一个大小的规范适用于所有较大的大小,由于xs是最小的大小,因此该级别的规范适用于所有其他大小,与无断点版本相同.

对于文本类,这在upgrade guide中提到:

.text-xs-{alignment}已重命名为.text-{alignment},以反映它适用于所有断点的事实.

(我认为偏移量和列类被认为是内部的,没有关于它们的文档.

因此,您要么必须自己添加这些类,要么更新这些类:

  • xs12:使用v-col-12(此版本也已重命名)
  • text-xs-left:使用text-left
  • offset-xs2:使用offset-2(较大的尺寸现在在断点和宽度之间有一个破折号,即offset-lg-2)

Css相关问答推荐

无法瞄准元素

在Angular mat-drawer组件中防止在mat-drawer-innercontainer中添加滚动条

如何仅以WooCommerce单一产品页面为目标?

try 在Jekyll中使用多个SCSS文件时出错

防止表格水平拉伸整个Blazor页面

如何通过重复的网格区域来简化网格布局?

当鼠标移到侧边栏之外时,如何防止shiny 仪表板侧边栏菜单中的 pickerInput 选项被切断?

是否可以在元素之间对齐渐变?

flexbox换行时自动设置高度的原理是什么

使用 Flex 容器,如何在右对齐所有 Flex 子项的同时赋予子图像完整宽度?

根据子索引计算变换 CSS 参数

Flex & space-around 与内容相交

CSS 仅过渡背景 colored颜色

使用 React-Router 和 Outlet 时如何确保内容保持在下方

如何将转换应用于相同的元素但处于不同的状态:悬停

使用css水平+垂直翻转/镜像图像

什么是 ::content/::slotted 伪元素,它是如何工作的?

如何将文本向左旋转 90 度并根据 html 中的文本调整单元格大小

React - 防止父子事件触发

html元素(div)的全高,包括边框,填充和边距?