Question

在google material框架中，我有此代码

        <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种类型的媒体断点，用于指定特定的屏幕尺寸或方向。网格组件的道具实际上是从其定义的属性派生的类。

这意味着传递到v-flex组件的道具为grid元素定义了响应类。

如果转到同一页面上的#API部分，然后从组件的选择中选择v-flex，则第一个可用的属性：(size)(1-12)列出可能的值以指定每个断点的布局：

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

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

用法示例：

<v-flex xs12 sm5 md3>
  <v-card dark color="primary">
    ...
  </v-card>
</v-flex>

确保v-flex文档说明了网格正常工作所需的布局结构。

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

1 个答案: