如何在 vuetify 中创建响应式布局？

Question

在谷歌材料框架中，我有这个代码

        <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-3-desktop mdc-layout-grid__cell--span-4-tablet mdc-layout-grid__cell--span-4-phone">
            <v-text-field :type="page.text_input_date_from.type" :label="page.text_input_date_from.label" box autofocus :append-icon="page.text_input_date_from.icon" v-model="page.text_input_date_from.value"></v-text-field>
        </div>
        <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-3-desktop mdc-layout-grid__cell--span-4-tablet mdc-layout-grid__cell--span-4-phone">
            <v-text-field :type="page.text_input_date_to.type" :label="page.text_input_date_to.label" box autofocus :append-icon="page.text_input_date_to.icon" v-model="page.text_input_date_to.value"></v-text-field>
        </div>
        <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-3-desktop mdc-layout-grid__cell--span-4-tablet mdc-layout-grid__cell--span-4-phone">
            <v-text-field :type="page.text_input_person_name.type" :label="page.text_input_person_name.label" box autofocus :append-icon="page.text_input_person_name.icon" v-model="page.text_input_person_name.value"></v-text-field>
        </div>
        <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-3-desktop mdc-layout-grid__cell--span-4-tablet mdc-layout-grid__cell--span-4-phone">
            <v-text-field :type="page.text_input_company_name.type" :label="page.text_input_company_name.label" box autofocus :append-icon="page.text_input_company_name.icon" v-model="page.text_input_company_name.value"></v-text-field>
        </div>

基本上有这样的课程

mdc-layout-grid__cell--span-3
mdc-layout-grid__cell--span-3-desktop
mdc-layout-grid__cell--span-3-tablet
mdc-layout-grid__cell--span-3-phone

如何使用 vuetify 复制相同的东西？

https://vuetifyjs.com/en/layout/grid

我看不到任何响应示例。

谢谢

Answer 1

来自Vuetify Grid文档页面：

它包含 5 种类型的媒体断点，用于定位特定的屏幕尺寸或方向。网格组件的 props 实际上是从它们定义的属性派生的类。

这意味着传递给v-col组件的props定义了网格元素的响应类。

如果您转到#API同一页面上的部分并v-col从组件的选择中进行选择，第一个可用的 prop:{size}="{1-12}列出可能的值以指定每个断点的布局：

xs：特小，
sm：小，
md：中，
lg：大，
xl：特大

它们与 的值一起使用1 through 12。

用法示例：

<v-col 
  xs="12" 
  sm="5" 
  md="3"
>
  <v-card dark color="primary">
    ...
  </v-card>
</v-col>

确保检查v-col文档以了解网格工作所需的布局结构。