vue.js - 如何设置所有仅在移动设备上彼此下方？

Question

如何<v-col>仅在移动设备上拥有以下所有内容？

<v-container>
  <v-row>
    <v-col>A</v-col>
    <v-col>B</v-col>
  </v-row>
  <v-row>
    <v-col>C</v-col>
    <v-col>D</v-col>
  </v-row>
<v-container>

标签： vue.jsbootstrap-4vuetify.js

Answer 1

只需将道具的值设置cols为跨越 12 列。

<v-container>
  <v-row>
    <v-col cols="12" sm="6">A</v-col>
    <v-col cols="12" sm="6">B</v-col>
  </v-row>
  <v-row>
    <v-col cols="12" sm="6">C</v-col>
    <v-col cols="12" sm="6">D</v-col>
  </v-row>
<v-container>

上面的代码将仅在移动设备上显示彼此的列。从sm断点开始，每列将跨越视口的一半。

Codepen上的演示。

这是它在移动视口上显示的内容：

如果视口比移动视口宽，我们会得到：